...

View Full Version : alistapart hybrid css/sliding doors problem



ziggy3984
01-13-2010, 06:47 PM
I have been trying to trouble shoot this nav bar. I can't seem to get it right. The issues reside mainly in ie. But there may be issues elsewhere.
Basically, I cannot get the submenu to appear when the main menu tabs are rolled over.

Any help would be greatly appreciated.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">

<script type="text/javascript">
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
</script>


<style type="text/css">

#mainnav{
width:927px;
margin-left:auto;
margin-right:auto;
position:relative;
text-align:center;
height:46px;
}
#nav {
width:827px;
margin-left:100px;
padding:0;
text-align:center;
font-size:14px;
}

#nav a {
text-decoration: none;
}
#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
margin-left:5px;
}

#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
position: absolute;
top: 29px;
*top: 29px; /*reposition for IE*/
height: 23px;
left: 0;
margin: 0;
padding: 0;
background:#00759F;
width:867px;
*width:927px;
padding-left:60px;
}
#nav li.off{
background: url("/header/up_r.jpg") no-repeat right top;
}
#nav li.off:hover, #nav li.over, {
background: url("/header/over_r.jpg") no-repeat right top;
}
#nav li.on{
background: url("/header/over_r.jpg") no-repeat right top;
}
#nav li.off a{
background: url("/header/up_l.jpg") no-repeat left top;
}
#nav li.off a:hover, #nav li:hover a, #nav li.over a {
background: url("/header/over_l.jpg") no-repeat left top;
}
#nav li.on a{
background: url("/header/over_l.jpg") no-repeat left top;
}
#nav li.on ul li a{
background:#00759f;
}
#nav li.on ul li a:hover{
background:#000000;
}
#nav li.off ul li a{
background:#00759f;
}
#nav li.off ul li a:hover{
background:#000000;
}
#nav li a {
/*for all links in the list*/
color: #ffffff;
font-weight: bold;
display: block;
height: 12px;
padding: 8px 15px 9px 15px;
*display:inline;
}

#nav li.on a {
color:#ffffff;
}

#nav li.on ul a, #nav li.off ul a {
/* cancel inherit of border
on subnav of active topic */
border: 0;
float: left;
color: #ffffff;
width: auto;
margin-right: 10px;
padding:5px 30px 5px 30px;
font-size:12px;
}

#nav li.on ul {
/*display active subnav list*/
display: block;
}

#nav li.off:hover ul, #nav li.over ul {
/* display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li:hover a, #nav li.over a{
color: #ffffff;
}
</style>

-----------------------


<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="mainnav">
<ul id="nav">
<li class="on"><a href="#">Products</a>
<ul>
<li><a href="#">Product1</a></li>
<li><a href="#">Product2</a></li>
<li><a href="#">Product3</a></li>
<li><a href="#">Product4</a></li>
<li><a href="#">Product5</a></li>
</ul>
</li>
<li class="off"><a href="#"> Support</a>
<ul>
<li><a href="#">SupportPage1</a></li>
<li><a href="#">SupportPage2</a></li>
<li><a href="#">SupportPage3</a></li>
</ul>
</li>
<li class="off"><a href="#">AnotherTab</a>
<ul>
<li><a href="#">Anothersub1</a></li>
<li><a href="#">Anothersub2</a></li>
</ul>
</li>
<li class="off"><a href="#">morestufftab</a>
<ul>
<li><a href="#">morestuff1</a></li>
<li><a href="#">morestuff2</a></li>
<li><a href="#">morestuff3</a></li>
</ul>
</li>
<li class="off"><a href="#">About UsTab</a>
<ul>
<li><a href="#">aboutuspage1</a></li>
<li><a href="#">aboutuspage2</a></li>
<li><a href="#">aboutuspage3</a></li>
<li><a href="#">aboutuspage4</a></li>
<li><a href="#">aboutuspage5</a></li>
</ul>
</li>


</ul>
</div>
</td>
</tr>
</table>

quartzy
01-14-2010, 02:50 PM
Have you checked that this script will work in the version of IE that you are trying to code for as they do not all work in all browsers. If it does work maybe you will need a workaround. You have a margin left width of 5px on the nav.li so you will need to reduce your width for the nav.li off ul



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum