My horizontal navigation menu performs as expected in Firefox but fails in IE6. <snip>.
http://www.alamoceliac.org/home.html
http://www.alamoceliac.org/accss.css
Hi Lynn,
Not too difficult. In IE, a float's container element pretty much needs to be dimensioned or otherwise made hasLayout true. hasLayout is a freaky IE thing that even Billy boy likely doesn't grok. Just keep it in the back of your mind when you run into other IE oddities.
When you make a {display: block;}, so that the whole li block works on hover, IE requires the you also make a {position: relative;}. There are times when {position: relative;} needs to be applied to the float element and/or its parent and/or its sibling. IE-Mac can react negatively to this, so do it only if it actually fixes something in IE-Win.
I rearranged the properties to apply to the more appropriate (imo) selectors, ymmv.
#navbar {
background-color: #0084aa;
overflow: auto;
text-align: center;
width: 100%;
font: .75em Verdana, 'Trebuchet MS', Helvetica, sans-serif;
}#navbar ul {
padding: 0;
margin: 0;
list-style-type: none;
}#navbar li {
width: 9em;
float: right;
}#navbar a {
position: relative;
display: block;
color: #fff;
padding: 5px;
text-decoration: none;
border-right: 1px solid #fff;
}
----------
<div id="navbar">
<ul>
<li><a href="#">Contacts</a></li><li><a href="#">Print</a></li>
<li><a href="#">Join</a></li>
<li><a href="#">Home</a></li>
</ul>
</div><!-- end navbar -->Tested in Moz Opera7 and IE6.
cheers,
gary -- Anyone can build a usable web site. It takes a graphics designer to make it slow, confusing, and painful to use. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
