A CSS Menu Falls Apart

#1 / Oct 21, 2008 8:53pm
Perak
45 posts
I’ve got a real hair-puller going — which is particularly exasperating because I have no hair. 😝

I put together a quick site for my veterans group because our old server and really old (flat-file, non-EE) site came crashing down, and we needed to have something up and running ASAP due to an upcoming reunion.

Everything works fine, except for the top main menu, which falls apart in IE6. (Looks fine in IE7, Firefox, Safari.) The menu is straight CSS, no javascript. And perhaps I’ve looked at it too much, as is often the case, but I can’t see what’s killing it.

The source and the CSS both validate. A screenshot from browsershots.org is attached.

The page is here. The full CSS file is here, and here is the pertinent CSS:
```
#nav {
    width: 800px;
    height: 35px;
}

#nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

#nav ul li {
    float: left;
}

#nav ul a {
    text-decoration: none;
    line-height: 30px;
    display: block;
    border-bottom-style: none;
    height: 35px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
    background: transparent;
}

#nav ul a:hover {
    text-decoration: none;
    background: url(<a href="http://www.rimbachvets.org/art/navhoverbg.png">http://www.rimbachvets.org/art/navhoverbg.png</a>) no-repeat center top;
    color: white;
}
```
If someone could take a look and see if something jumps out, I’d be most appreciative.

#2 / Oct 22, 2008 8:26am

Jedidiah

24 posts

I don’t think IE6 likes the selectors with 3 levels.

You don’t really need the extra div round the menu so I’d try changing the nav html to

<!-- BEGIN NAVAREA -->
<ul  id="nav">
<li class="navitem"><a href="http://www.rimbachvets.org">Home</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/main/content/a_general_history">About Us</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/forums/viewcategory/3/">Reunions</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/gallery/">Photos</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/forums/viewforum/22/">Tall Tales</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/forums/">Forums</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/wiki/index/">Wiki</a></li>
<li class="navitem"><a href="http://www.rimbachvets.org/index.php/forums/viewforum/21/">Taps</a></li>
</ul>
<!-- END NAVAREA -->

and the css to

#nav {
    width: 800px;
    height: 35px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

#nav li.navitem {
    float: left;
}

.navitem a {
    text-decoration: none;
    line-height: 30px;
    display: block;
    border-bottom-style: none;
    height: 35px;
    padding-right: 10px;
    padding-left: 10px;
    color: #fff;
    background: transparent;
}

.navitem a:hover {
    text-decoration: none;
    background: url(<a href="http://www.rimbachvets.org/art/navhoverbg.png">http://www.rimbachvets.org/art/navhoverbg.png</a>) no-repeat center top;
    color: white;
}

It’s a few more classes in there but should be a bit more IE6 friendly.

Jedidiah

#3 / Oct 22, 2008 10:38am

ParisJC
150 posts

Thanks, Jedidiah. I’ll give those changes a test.

I managed to solve the problem about midnight, though in a different manner. (And went straight to bed before posting here. 😝 )

I pulled out my copy of CSS Mastery and went back to the basics looking for clues. At one point he talks about old IE 5.2 for the Mac not liking CSS menus because it wouldn’t “shrink-wrap” floated list items because they were block-level. Caused me to wonder if that might not apply to IE 6 for Windows as well. So, at the book’s suggestion, I added “float: left;” to the CSS anchor, and things popped right into place.

I’m going to test out your fix as well, because I like to have lots of ammunition to attack potential problems!

Thanks for taking the time to look at my problem, Jedidiah. I appreciate it.
#4 / Oct 22, 2008 10:45am

Jedidiah
24 posts

I was just guessing because I don’t have my IE6 box with me to test anything, but I’ve had problems with selectors going three levels deep before.

Thanks for sharing how you solved it, will add that to my ammunition too!

=)

Thread

Perak

Jedidiah

ParisJC

Jedidiah

Username

Password

Thread

A CSS Menu Falls Apart

Perak

Jedidiah

ParisJC

Jedidiah

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password