Container of floats not rendered the same 2

[OsakaWebbie]

I'm having fits trying to find the cause of a difference between different browsers' reaction to my CSS. The site is

http://gdopjapan.com

(if you don't want to look at too much Japanese, try

http://gdopjapan.com/english.html).

The CSS file is

http://gdopjapan.com/screen.css.

I currently have a silly red border on the div that is showing differently, which is id=header. I also have a silly cyan border on the <ul> which has no height of its own (so the cyan is just a line). I will only leave the borders there for a day or two (or until I solve this, whichever comes first), as the site is in use.

IE, Firefox, and Opera all assign no height to the <ul> even though there are <li> items in it, presumably because the <li>'s are float:left. But although IE and Opera place the bottom of the header div at the bottom of the <li>'s, Firefox puts it at the the bottom of the <ul> itself (ignoring the size of the floating items). I got the basics of the li-becomes-horizontal-menu trick from another web site, so I don't fully understand why it works the way it does, but without float:left they just line up below each other. Any ideas on how I can get the code to be rendered the same by these top browsers, or even just IE and Firefox?

 

[johnwm]

Could you just give the <ul> a height value?

nav ul {
height:20px;
//other bits here
.
.
}

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[ChrisHirst]

add a clearing element AFTER the last floated <li> to "break" the float and restore the "document flow"

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[OsakaWebbie]

Thanks, Chris! That worked like a charm. John, your idea probably would have worked also, but I prefer not to predetermine the height because I don't know how tall a given user's font will be. Chris's is more of a correction rather than a workaround.

Tek-tips is great!

 

[ChrisHunt]

You can do it without adding a clearing element to your HTML if you just add this:

nav ul { overflow: auto }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[OsakaWebbie]

Wow, even cleaner - thanks! Interestingly, when I implemented your solution and put the colored borders back in to see what's what, it revealed that with "overflow:auto", Firefox and Opera now consider the size of the <ul> to encompass the <li>'s, but IE still shows the <ul> with no actual height. But it still starts the next div below the <li>'s, so the result is the same. I still have a lot to learn about CSS, especially regarding floats, but you guys are a great help!

 

[ChrisHunt]

I think you may need a further hack for IE:

* html nav ul { height: 1%; }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[OsakaWebbie]

Actually, at least in IE6.0 it looks like it works fine even without the hack (I don't care how tall it thinks the <ul> is as long as it spaces visible things correctly). But if you don't mind my asking, what in the world does setting the height to 1% do? More CSS voodoo...