Mac I 5 float left problems

[Trenton]

I can't get my navigation to work in IE5 on the Mac. I've read previous threads [webmasterworld.com] about it, looked at [macedition.com...] and generally looked all over the web for help.

I'm trying to make a horizontal navigation strip across the top of the screen. In IE5 on the Mac you can only see Home and it's positioned in the center of the screen. Do any hacks exist to get round this float left problem?

Here's the CSS:

#nav {width:100%; margin-top:40px; padding-top:2.5em; position:absolute; top:0; white-space:nowrap}

#nav div {background:#666; color:#fff; padding:4px 0; text-transform:uppercase; height:2.1em; margin:0; white-space:nowrap}

#nav div div {float:left; text-align:center; margin:0; padding:0 10px}

#nav div a:link, #nav div a:active, #nav div a:visited {font-size:1em; color:#fff; margin:0; text-decoration:none; font-weight:bold}

#nav div a:hover {font-size:1em; color:#f80; margin:0; text-decoration:none; font-weight:bold}

#nav div strong {color:#f80}

#nav br {font-size:0.5em}

#nav a br {font-size:1em}

And the HTML:

<div id="nav">
<div>
<div><br /><strong>Home</strong></div>
<div><a href="x">About <br />us</a></div>
<div><br /><a href="x">News</a></div>
<div><br /><a href="x">Services</a></div>
<div><br /><a href="x">Clients</a></div>
<div><a href="x">Events amp; <br />resources</a></div>
<div><a href="x">Publications <br />&amp; papers</a></div>
<div><a href="x">Contact <br />us</a></div>
</div>
</div>

[ram_mac]

if you give the #nav div div an explicit width:

#nav div div {
float:left;
text-align:center;
width: 9%;
margin:0;
padding:0 10px
}

then this seems to sort out the problem.

however this causes it to scroll in Safari 1.2 (the 9% value)

I think a styled list may work more in the way that you intend this to and create less markup as well.

[Bonusbana]

yes, a floating div should always have a specific width according to the w3 specs.

[Trenton]

Thanks, guys!