2 replies [Last post]
adrianrowbotham
Offline
newbie
London, UK
Last seen: 15 years 36 weeks ago
London, UK
Joined: 2003-11-10
Posts: 3
Points: 0

This old chestnut again... (groan)

I have a cross-browser compatibility problem with a CSS layout. Basically I have a DIV, with a fixed width and a background colour, used as a Nav bar.

Within this DIV, I have some tags with a class that gives them a padding.

The height of the nav bar is not fixed in pixels because I want it to be accessible so the browser font size controls the size of the bar.

The url is http://www.al-scott.co.uk/nav_prob.html

The page is XHTML 1.0 strict.

It works fine in IE6 and Opera.

On mozilla (any variant), the nav bar doesn't pick up the height from the padded links, so it's too small and the content from the DIV below floods into the nav bar.

If anyone knows a way to achieve this effect in a compatible way, then I'll be a very happy man.

It's a bit messy, but most of this is inline CSS, for the purposes of quick debugging.

Many Thanks,
Adrian

cvk
Offline
Regular
right behind you
Last seen: 15 years 36 weeks ago
right behind you
Timezone: GMT-5
Joined: 2003-11-06
Posts: 14
Points: 0

CSS layout - nav problem

Adrian,

Floating those anchors -- sounds weird, doesn't it? -- caused the navbar div to collapse because the anchors (a tags) didn't take up space anymore. Add float: left; to the navbar div to cause it to take the anchors into account again in calculating its height.

One problem: adding that float: left; directive to the navbar div will cause the next div to sit to its right. Fix it by adding clear: left; to the second div.

Here are the relevant lines:

...for the navbar:

<!-- nav -->
<div style="float: left; width: 450px; height: auto; background-color: rgb(153, 153, 204);">

...and for the body div:

<!-- body content -->
<div style="clear: left; margin-top: 1px; width: 450px; background-color: rgb(238, 238, 238);">

c v k @ z y b x . c o m

adrianrowbotham
Offline
newbie
London, UK
Last seen: 15 years 36 weeks ago
London, UK
Joined: 2003-11-10
Posts: 3
Points: 0

CSS layout - nav problem

Great, many thanks.

I think the problem was that I didn't really understand about floating DIVs. Also the 'clear' attribute is new to me. Very handy.

Thanks,
A.