Horizontal floated navigation lists and IE5 Mac

A display problem with a seemingly useful technique

[naggingfishwife]

I've been using the seemingly ok horizontal navigation list technique detailed at projectseven (which uses floats rather than inline lists) across the top of a three-column layout with two absolutely positioned side menus. It works in every browser I've tried except for IE5 Mac (yes, I know...). It won't display horizontally unless a width is specified for the li's (not included in the code below), and even then the items ignore their container div (#uppermenu) and the extra container around that (#uppermenuwrapper - I put it in for positioning). To add to my woes, the floated list also crashes down into the main content div, squeezing all it's content over to the left for it's full height. Any ideas?

Hear's the html for the list and it's containers:

<div id="uppermenuwrapper" class="clearfix"><!-- this div needed for the holly hack -->
<div id="uppermenu">
<ul><li><a href="">support us</a></li><li><a href="">about us</a></li><li class="noborder"><a href="">contact us</a></li></ul>
</div>
</div>
<div id="contentouter">
hello world blah blah
</div>

... and here's the css:

/* begin holly hack, which also includes the usual extra javascript in html header */

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

/* End holly hack */

#uppermenuwrapper{
margin:0.2em 188px 0.2em 0;
padding:0;
}

#uppermenu{
margin:0;
padding:0;
width:100%;
}

#uppermenu ul {
margin:0;
padding:0;
}

#uppermenu li{
float:right;
list-style-type:none;
margin:0;
padding:0 0.3em 0 0.2em;
text-align:right;
border-left:1px solid #baa68e;
whitespace:nowrap;
}

#uppermenu li.noborder{
border:0;
}

#uppermenu a{
margin:0;
padding:0 0.3em 0 0.5em;
color:#336699;
text-decoration: none;
text-align:right;
}

#uppermenu a:hover{
margin:0;
padding:0 0.3em 0 0.5em;
background-color:#336699;
color:#ffffff;
text-decoration:none;
text-align:right;
}

#contentouter{
margin:0 190px 0 175px;
padding:0;
text-align:left;
background-image:none;
background-color:#ffffff;
border:1px solid #e1d4c0;
}

[J_Mein]

The javascript function "fixmacie" isn’t adding the required clearing element (at least not on my local test).

This fix works with:
mac os 9.2.2
ie 5.1.2
mozilla 1.2.1

Your html:

 
<div id="uppermenu"> 
<ul><li><a href="">support us</a></li><li><a href="">about us</a></li><li class="noborder"><a href="">contact us</a></li></ul> 
[b]
/*add this clearing div right after your floated li’s */
<div class="clear"><!-- --></div>
[/b]
</div> 

Here is the css:

 
[pre].clear {
 clear:both;
 margin:0;
 padding:0;
 height:0;
 line-height:0;
}[/pre]

HTH

[createErrorMsg]

the items ignore their container div (#uppermenu) and the extra container around that (#uppermenuwrapper

Try adding a float (either direction) to #uppermenu. A container will not stretch to contain it's floated children unless it is, itself, floated.

#uppermenu {
float: left;
width: whatever;
}

Don't forget that ALL floated elements MUST have widths, which yours don't. A float without a width is just asking for display troubles.

So in review...float the container, give all floats explicit widths, let us know if this doesn't work.

[naggingfishwife]

Many thanks for your useful suggestions. I've finally got it to display inline in MacIE by:

Adding widths to the floated <li>s as suggested; Adding J_Mein's clearing div;
Applying the clearfix style to BOTH the container divs (#uppermenu and #uppermenuwrapper).

I didn't need to float the #uppermenu container div as suggested as the clearfix seemed to do the job, although that's a good point about floats enclosing floats.

The floated <li>s contain text links only, so getting them to sit nicely together right next to each other is going to be a challenge now that they've got fixed widths! Serves me right for attempting a cross-browser horizontal css nav list...

It's a shame the javascript isn't doing the job that it's supposed to, ie doing away with the need for a clearing div for everything but MacIE. I'll post the problem to a javascript forum.

Thanks again.