Navigation issue in IE

HTML & CSS
1

Here’s the link: http://berryequipment.net/new/
If you hover over equipment, it works correctly in Firefox in that it goes to the left of the nav and just below it and starts another horizontal nav. IE has it all screwed up and over to the side, can’t really see anything wrong or figure it out. I can understand it not pushing to the far left and needing some sort of fix for that, but I don’t get why it’s at a set width when nothing I have sets a width on it.

2

Fixed the ‘width problem’ now it’s just a matter of it not aligning to the left side like in firefox.

3

Hi,

You need to add a full doctype or IE will render as though it was still 1999 and use the broken box model among many other bad things :).

Just give the suckerfish js to ie6 and under as others don’t need it.

Then with a few tweaks it should be working:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" title="default">
<style type="text/css">
html {
    min-width:999px;
}
body {
    min-width:999px;
    margin: 0px;
    padding: 0px;
    background: #050608;
}
img {
    border: 0px;
}
#container {
    text-align: center;
    width: 100&#37;;
    background:  url(http://berryequipment.net/new/bg_main.jpg) repeat-y 50% 251px;
}
#main_container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
}
#header {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    height: 166px;
    background:  url(http://berryequipment.net/new/headerbg.jpg);
}
#header_logo {
    float: left;
    height: 166px;
    width: 390px;
    background:  url(http://berryequipment.net/new/bpelogo.jpg);
}
#header_nav {
    position: relative;
    float: left;
    height: 166px;
    width: 570px;
}
#navbar {
    position: relative;
    margin: 0;
    padding: 0;
    width:100%;
    text-align:left;
    list-style: none;
}
#navbar li {
    float: left;
}
#navbar li a {
    display:block;
}
#navbar li li a, #navbar li li a img {
    float:left;
}
#navbar li ul {
    position: absolute;
    left: 0;
    margin-left:-999em;
    padding: 0;
    width:570px;
}
#navbar li:hover ul, #navbar li.hover ul {
    margin-left:0;
}
#navbar li:hover li a, #navbar li.hover li a {
    color: #fff;
}
#navbar li li a:hover {
    color: #357;
}
#featured {
    width: 960px;
    height: 391px;
    background:  url(http://berryequipment.net/new/featured.png);
}
#content {
    position: relative;
    top: 10px;
    width: 940px;
    background-color: #FFFFFF;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
sfHover = function() {
   var sfEls = document.getElementById("navbar").getElementsByTagName("li");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" hover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" hover\\\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<![endif]-->
</head>
<body>
<div id="container">
    <div id="main_container">
        <div id="header">
            <div id="header_logo"></div>
            <div id="header_nav">
                <div id="menu">
                    <ul id="navbar">
                        <li><a href="#"><img src="http://berryequipment.net/new/nav/home.jpg"></a></li>
                        <li><a href="#"><img src="http://berryequipment.net/new/nav/about.jpg"></a></li>
                        <li><a href="#"><img src="http://berryequipment.net/new/nav/equipment.jpg"></a>
                            <ul>
                                <li><a href="#"><img src="http://berryequipment.net/new/nav/picking.jpg"></a></li>
                                <li><a href="#"><img src="http://berryequipment.net/new/nav/evisceration.jpg"></a></li>
                                <li><a href="#"><img src="http://berryequipment.net/new/nav/giblethandling.jpg"></a></li>
                                <li><a href="#"><img src="http://berryequipment.net/new/nav/furtherprocessing.jpg"></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><img src="http://berryequipment.net/new/nav/myaccount.jpg"></a></li>
                        <li><a href="#"><img src="http://berryequipment.net/new/nav/contact.jpg"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="featured"></div>
        <div id="content">test</div>
    </div>
</div>
</body>
</html>