homepage Welcome to WebmasterWorld Guest from 54.196.194.204
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Phantom space between list items in IE6
Works fine in IE7 and Firefox
bobming




msg:3221426
 8:56 pm on Jan 16, 2007 (gmt 0)

It was supposed to be a simple menu, but I've noticed I'm getting some mystery padding or margin between the items in my list, but only in IE6. Is there something simple I'm missing here?


<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#right-menu{
position:absolute;
top:150px;
right:0;
}
#nav{
margin:0;
padding:0;
list-style-type:none;
}
#nav li{
margin:0;
padding:0;
background:#fff url("../images/nav-bullet.gif") left no-repeat;
}
#nav li a{
display:block;
text-decoration:none;
font-size:18px;
font-family:"Trebuchet MS";
margin:0;
padding:7px 40px;
background:transparent url("../images/nav-button.gif") right no-repeat;
}
#nav li a:hover{
background:transparent url("../images/nav-hover.gif") right no-repeat;
}
</style>
</head>
<body>
<div id="right-menu">
<ul id="nav">
<li><a href="page1.html">Menu Item One</a></li>
<li><a href="page2.html">Menu Item Two</a></li>
<li><a href="page3.html">Menu Item Three</a></li>
<li><a href="page4.html">Menu Item Four</a></li>
</ul>
</div>
</body>
</html>

 

Setek




msg:3221529
 10:36 pm on Jan 16, 2007 (gmt 0)

It's because you have your
#nav li displaying (by default) as list-item, and #nav li a set (by author) as block. This creates an extra line below the anchor in IE 6, it's a bug :)

It's most easily fixed by just setting #nav li to display inline, but it means your background property probably won't work all that well, since the li would then take up one line, and if you needed it positioned farther down vertically, it can't.

I believe either SuzyUK or Robin_reala had another fix for this, not involving changing the display type - but I'm sorry, for the life of me I can't remember what that was :)

Umm... try either height: 1px for IE 6 only (use conditional commented stylesheets) or maybe setting line-height to the exact height of the block-level anchor inside it :)

pageoneresults




msg:3221532
 10:39 pm on Jan 16, 2007 (gmt 0)

I believe either SuzyUK or Robin_reala had another fix for this, not involving changing the display type - but I'm sorry, for the life of me I can't remember what that was :)

Would that be putting all the <li></li>'s on one line?

<ul>
<li></li><li></li><li></li>
</ul>

Setek




msg:3221557
 11:06 pm on Jan 16, 2007 (gmt 0)

Would that be putting all the <li></li>'s on one line?

Hehehe nah, I never liked that solution, it was always so messy and difficult to maintain.

I think it had to do with setting the height or line-height properties, but since I'm at home I'm on a Mac, so I'd need to be at work to get at IE 6 to test :)

bobming




msg:3221596
 11:33 pm on Jan 16, 2007 (gmt 0)

Thanks for the input, glad to learn about yet another bug in IE6 :-)
However I seem to have fixed it another way...

I've given the "#nav li a" a set width in pixels, taken out the 40px padding on the sides and put it on the "#nav li". The space between the list items has gone, only this way the nav-bullet.gif background isn't part of the clickable link anymore, but I can live with that!

Panic_Man




msg:3223338
 9:20 am on Jan 18, 2007 (gmt 0)

I have been using what I like to call 'list-fish' to get round this problem. I can't take the credit for it though - read it online somewhere.

<ul
><li> *blah* </li
><li> *blah* </li
></ul>

n.b. ><li> is the 'fish' bit

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved