Navigation layout or positioning problem in IE 7 only

Hidy,

I've put a write-up of my problem first: the code is at the bottom (I've hacked it down, but it's still bearish). Thank you for any ideas that you can offer, guys!

-Ben

WHAT IS THE CODE SUPPOSED TO DO?

The code shown at the foot of this message creates a simple expanding vertical menu based on an unordered list (#menu) of four main list items. Beneath the second main list item is a submenu (#menu ul) composed of an unordered list of 3 more items. Each of the main menu and submenu items should be the exact same width and height (185x22).

Initially, the submenu is not displayed: this is set using "display: none". On the pages where the submenu is required, a style is dynamically added to the header of this page which changes the display value to "inline". The submenu expands directly down, pushing the main list items below it further down the page. That's the basic mechanism.

Messying up the stylesheet a bit is some code for some image sprites that slide background images into place when one hovers over each text link in the list. This sprite code is lengthy (I do apologize for this), but has been included because it requires me to make some block elements that could affect this case.

THE PROBLEM:

When a new style is applied to the submenu (#menu ul) that should push the other items contained within the main menu div (#menu) further down the page, it doesn't work in IE 7. Instead, the submenu overlaps the main nav: it appears to either be _behind_ the main nav (when the subnav is set to "display: inline;" or in front of it given other settings.

This case is interesting for two reasons:

1.) The code as shown breaks only in IE 7. The nav works in IE 6, Firefox (Mac/Win), Netscape 7+, and several lovely Mac browsers (my spec for the project doesn't require me to support anything else). I'm looking for a solution that works in both IE 7 and all of these browsers.

2.) I am only allowed to create this mouseover/sprite effect by editing the style sheet: I am not permitted to edit the existing (rather naff) HTML code shown and am not permitted to add any Javascript to the site. We're stuck with the CSS alone.

WHAT I'VE ALREADY DONE:

I've combed the Web and this board for ideas. I'm pretty sure that the problem involves the interaction of "#menu ul" with some other element, but I haven't nailed it.

For instance, I have already tried applying "haslayout" to various combinations of ids (using both "zoom: 1;" and "position: relative;"). Relatively positioning "#menu ul" and "#main2subnav" pushed the subnav in front of (rather than behind) the main navigation but didn't make room for the subnav within the main nav itself. I've tried dozens of different "positions" and "displays" on each id without nailing anything that would make the submenu push down the items below it.

As well, I also thought that this might be some sort of "escaping float" issue, but I can't fathom it (especially since this CSS/HTML mechanism works in IE6).

THE DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

THE CODE:

First, here's the single style that we use to trigger the submenu:


#main2subnav { display: inline; }

Here are the styles for the rest of the menu:


#menu, #menu ul {
 width: 185px;
 border: 0;
 margin: 0;
 padding: 0;
 list-style-type: none;
}


#menu li, #menu ul li {
 float: left;
 width: 185px;
 border: 0;
 margin: 0;
 padding: 0;
}


#menu li a {
 display: block;
 margin: 0;
 padding: 0;
 width: 185px; height: 22px;
 overflow:hidden;
 text-decoration: none;
}


#menu ul li a {
 display: block;
 margin: 0;
 padding: 0;
 width: 100%; height: 100%;
 overflow:hidden;
 text-decoration: none;
}


#menu strong, ul#topnav li a strong {
 margin: 4px;
 overflow: hidden;
 text-transform: lowercase;
}


#menu li a:hover { background-image: none; }
#menu ul li a:hover { background-image: none!important; }


#main1 { background: url('main1.gif') -185px 0 no-repeat; height: 22px; }
#main1 a { background: url('main1.gif') top left no-repeat; }
#main2 { background: url('main2.gif') -185px 0 no-repeat; height: 22px; }
#main2 a { background: url('main2.gif') top left no-repeat; }
#sub1 { background: url('sub1.gif') -185px 0 no-repeat; height: 22px; }
#sub1 a { background: url('sub1.gif') top left no-repeat!important; }
#sub2 { background: url('sub2.gif') -185px 0 no-repeat; height: 22px; }
#sub2 a { background: url('sub2.gif') top left no-repeat!important; }
#sub3 { background: url('sub3.gif') -185px 0 no-repeat; height: 22px; }
#sub3 a { background: url('sub3.gif') top left no-repeat!important; }
#main3 { background: url('main3.gif') -185px 0 no-repeat; height: 22px; }
#main3 a { background: url('main3.gif') top left no-repeat; }
#main4 { background: url('main4.gif') -185px 0 no-repeat; height: 22px; }
#main4 a { background: url('main4.gif') top left no-repeat; }


/** hide all left subnavs by default **/
#main2subnav { display: none; }

Here is the HTML:


 <ul id="menu">
 <li id="main1"><a href=""><strong>Main1</strong></a></li>
 <li id="main2"><a href=""><strong>Main2</strong></a></li>
 <ul id="main2subnav">
 <li id="sub1"><a href=""><strong>Sub1</strong></a></li>
 <li id="sub2"><a href=""><strong>Sub2</strong></a></li>
 <li id="sub3"><a href=""><strong>Sub3</strong></a></li>
 </ul>
 <li id="main3"><a href=""><strong>Main3</strong></a></li>
 <li id="main4"><a href=""><strong>Main4</strong></a></li>
 </ul>

Navigation layout or positioning problem in IE 7 only

Possibly obscure haslayout or escaping float issue

bencm

bencm

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week