Forum Moderators: not2easy

Message Too Old, No Replies

Layout issues on navbar

hasLayout problem?

         

sunwukung

8:55 am on Apr 7, 2008 (gmt 0)

10+ Year Member



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>

sunwukung

1:18 pm on Apr 7, 2008 (gmt 0)

10+ Year Member



FYI: I've managed to fix this issue now, so no need to respond.

Xapti

2:27 pm on Apr 7, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just so you know, that doctype triggers quirksmode for most browsers, at least in certain common versions (IE6, IE7, Opera9, etc.), if not all browsers.
Include a DTD and you'll essentially get full compliance (it's almost standards mode though).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

sunwukung

4:36 pm on Apr 9, 2008 (gmt 0)

10+ Year Member



Oh, cheers for that, I'll check it out.