Layout issues on navbar

Hi all
I'm having trouble with this section of a menu layout I'm working on in IE7. Not yet gone down the route of conditionals or hacks, but I think it's a hasLayout problem - the anchors having a hasLayout property of -1. The buttons are rollover images 500px wide, I'm using a limited width and altering the registration of the image to create the effect.
Can anyone point me in the right direction (preferably avoiding hacks/conditionals?)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>boxtest</title>
<style>
#navtop{
width: 960px;
float: left;
}
#navtop li a{
display: block;
float: right;
width: 158px;
height: 30px;
padding: 3 0 0 0;
font-size: 1em;
text-indent:-9999px;
border-left:1px solid #25272b;
border-right:1px solid #45474b;
border-top: 1px solid #5b5d61;
border-bottom: 1px solid #1b1d1f;
}
a.company {
background: #232428 url('btn_company.jpg') no-repeat top left;
}
a.services {
background: #232428 url('btn_services.jpg') no-repeat top left;
}
a.products {
background: #232428 url('btn_products.jpg') no-repeat top left;
}
a.contact {
background: #232428 url('btn_contact.jpg') no-repeat top left;
}
#navtop a:hover{
background-position: top right;
}
</style>
</head>
<body>
<div id="navtop">
<ul>
<li><a href="#" class="company">COMPANY</a></li>
<li><a href="#" class="services">SERVICES</a></li>
<li><a href="#" class="products">LATEST</a></li>
<li><a href="#" class="contact">CONTACT</a></li>
</ul>
</div>
</body>
</html>

Layout issues on navbar

hasLayout problem?

sunwukung

sunwukung

Xapti

sunwukung

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week