http://www.webmasterworld.com Welcome to WebmasterWorld Guest from 38.103.63.17
register, login, search, glossary, subscribe, help, library, PubCon, announcements , recent posts, unanswered posts
Subscribe and Support WebmasterWorld
Home / Forums Index / Browser Side World / CSS
Forum Library : Charter : Moderators: DrDoc & Robin reala & SuzyUK

CSS

  
Layout issues on navbar
hasLayout problem?
sunwukung


#:3620713
 8:55 am on April 7, 2008 (utc 0)

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


#:3620830
 1:18 pm on April 7, 2008 (utc 0)

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

Xapti


#:3620894
 2:27 pm on April 7, 2008 (utc 0)

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


#:3622792
 4:36 pm on April 9, 2008 (utc 0)

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

 

Home / Forums Index / Browser Side World / CSS
All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of WebmasterWorld Inc.
© WebmasterWorld Inc. / SearchEngineWorld 1996-2008 all rights reserved