Content display problems when using Suckerfish menus with 960.gs and IE
- by Cedar Jensen
I'm using 960.gs layout and when I add the suckerfish menu as part of the content to one of the grids, the contents of adjacent siblings bleed through the menu in all versions of IE.
In the listed html below, the text from 'belowFoldSection' will appear through the menu when it is visible and has enough items to make it span over 2nd section. However, the contents of 'introSummary' will be underneath the menu, as expected. I've set the z-index for #nav and #nav ul in my css and this of course makes it work in FF, Chrome and Safari, but not in IE (because IE incorrectly assigns child elements its own z-index).
If I change the .grid_nn class 'position' attribute (set by default in the 960 template) from 'relative' to absolute, this fixes it in IE. However, it is my understanding that I don't want the child elements of the 'container_12' to be taken out of the flow of the document and want them positioned relative to the .container_12's starting point. (Changing the attribute to absolute causes other general layout problems)
Can anyone suggest a work-around?
My html:
<div class="container_12">
<!--First section where menu lives-->
<div class="grid_12" id="mainSection">
<div class="grid_4 alpha" id="intro">
<p>Start of menu here</p>
<div id="subMenu">
<ul id="nav">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Burrowing gobies</a></li>
<li><a href="#">Dartfishes</a></li>
<li><a href="#">Eellike gobies</a></li>
<!--10 more for longer list -->
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Remoras</a></li>
<li><a href="#">Tilefishes</a></li>
<!--10 more for longer list -->
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Climbing perches</a></li>
<li><a href="#">Labyrinthfishes</a></li>
<li><a href="#">Kissing gouramis</a></li>
<!--10 more for longer list -->
</ul>
</li>
</ul>
<div id="introSummary">
<h1>PERCIFORMES! (1)</h1>
<p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>
</div>
</div> <!-- end of sub menu -->
</div>
<div class="grid_8 omega" id="summary">
<p>Some stuff goes here</p
</div>
</div> <!-- End of first section -->
<div class="clear"> </div>
<div class="grid_12 spacer">
</div>
<div class="grid_4" id="belowFoldSection">
<p>Here is some stuff I want to appear below the menu when the pop-up is visible</p>
</div>
</div> <!-- container_12 -->
The suckerfish css file:
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 1;
z-index: 99;
}
#nav a {
display: block;
width: 10em;
}
#nav li { /* all list items */
float: left;
width: 10em;
}
#nav li ul { /* second-level lists */
position: absolute;
background: orange;
width: 10em;
left: -999em;
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
Default 960.gs css:
.container_12, .container_16 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
.grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
.grid_13, .grid_14, .grid_15, .grid_16 {
display: inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
}
