...

View Full Version : IE Pushing my navigation to a second row



dprichard
01-04-2008, 09:54 PM
I have a header built that works fine in safari and ff, but IE pushed my navigation to a second row. If I take out the hyperlinks it works in IE, but as soon as I put my links back 2 of my buttons go to a second row.

Any help would be appreciated. The first set of code is my css and the second is my html.

Thank you!


#topmenu {
margin-left: auto;
margin-right: auto;
border-color: #999;
border-style: solid;
border-right-width: 1px;
border-left-width: 1px;
border-top-width: 0;
border-bottom-width: 0;
width: 800px;
height: 23px;
}
#topmenu1 {
background-image: url(../images/menu1.jpg);
width: 186px;
height: 23px;
float: left;
}
#topmenu2 {
background-image: url(../images/menu2.jpg);
width: 122px;
height: 23px;
float: left;
}
#topmenu2:hover {
background-image: url(../images/menu2h.jpg);
}
#topmenu3 {
background-image: url(../images/menu3.jpg);
width: 121px;
height: 23px;
float: left;
}
#topmenu3:hover {
background-image: url(../images/menu3h.jpg);
}
#topmenu4 {
background-image: url(../images/menu4.jpg);
width: 121px;
height: 23px;
float: left;
}
#topmenu4:hover {
background-image: url(../images/menu4h.jpg);
}
#topmenu5 {
background-image: url(../images/menu5.jpg);
width: 121px;
height: 23px;
float: left;
}
#topmenu5:hover {
background-image: url(../images/menu5h.jpg);
}
#topmenu6 {
background-image: url(../images/menu6.jpg);
width: 127px;
height: 23px;
float: left;
}
#topmenu6:hover {
background-image: url(../images/menu6h.jpg);
}

HTML Below:


<body>
<div id="header">
<div id="topline">
<ol>
<li class="separator">Shop Online Now</li>
<li class="separator">Order Status</li>
<li>Sign-In</li>
</ol>
</div>
<div id="dottedline">
</div>
<div id="toplogo">
</div>
<div id="topmenu">
<div id="topmenu1">
</div>
<a href="test.php"><div id="topmenu2">
</div></a>
<a href="test.php"><div id="topmenu3">
</div></a>
<a href="test.php"><div id="topmenu4">
</div></a>
<a href="test.php"><div id="topmenu5">
</div></a>
<a href="test.php"><div id="topmenu6">
</div></a>
</div>
</div>
</body>
</html>

Excavator
01-04-2008, 11:21 PM
Hello dprichard,
a couple things - I don't see a doctype for one.
You can't wrap a div in a tags. Should be the other way around, like this:
<div id="topmenu2"><a href="test.php"></a></div>

Validator finds all that. See the suggestion and links about validating in my sig below.

Have a look at a 2-state rollover menu example I have. (http://nopeople.com/CSS/2state%20CSS%20navbar/) View source to see how it's done.

dprichard
01-07-2008, 07:37 PM
Thank you. Your example helped a lot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum