Mon, 2003-11-10 15:25
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
Tue, 2003-11-11 11:50
#1
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);">
Tue, 2003-11-11 13:52
#2
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.