CSS layout - nav problem

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 <A> 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 IE and Opera.

On mozilla, 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

hu

tutorial 6 is very good here

and if you follow this it will work fine in al browsers including IE5+

jim

Thanks for the swift reply. I implemented the example you linked above (using a UL) and it partly solved things.

However, it seems that it's not the NAV itself that's the problem, it's how the surrounding divs (above and below) relate to the NAV.

This example: http://www.al-scott.co.uk/nav_prob2.html
uses the UL method exactly as it was in your link, except that I've restricted the width to 450px and changed the bg colour to red to make it obvious what's happening.

If you look at this in Mozilla, you'll see that the content div, below the nav is spilling above the nav too. Is there something wrong with my styles on the surrounding divs ?

Thanks again,
Adrian

The gap above the nav bar can be losy by addind margin-top:0;

e.g.

#navcontainer ul {

The gap above the nav bar can be losy by addind margin-top:0;

e.g.

#navcontainer ul {
blah
margin-top:0;
}

and

.clearboth {
clear: both;
}

in the CSS and putting <br class="clearboth"> immediately beneath the </div> for the nav bar will hopefully solve your prob...

jim

Why do I get the impression you're much better at this than me?

Thanks very much - I owe you a beer.

shame about the quality of my spelling though.....

all i know (and i don't know much - i've just built my first CSS site) has been found by trawling the internet and through forums like this - and a lot of fiddling and re-fiddling and.....

you can still buy me the beer next time i'm in town though!