Forum Moderators: not2easy

Message Too Old, No Replies

IE6 putting space between CSS rollover vertical list

         

andyhiggs

10:36 pm on Aug 24, 2004 (gmt 0)

10+ Year Member



I've got a CSS rollover vertical list on the left hand side of a website that appears the way I want it in Firefox and Netscape7.1, but not in IE6. In IE6 it puts space between each list item. I guess my best description of how I want it is like this:

Stuff
Stuff
Stuff

...but in IE it looks like this:

Stuff

Stuff

Stuff

Here's the code for the list:
<td style="width:181px"><div id="navcontainer">
<ul>
<li><a href="#">:: Stuff</a></li>
<li><a href="#">:: Stuff</a></li>
<li><a href="#">:: Stuff</a></li>
<li><a href="#">:: Stuff</a></li>
<li><a href="#">:: Stuff</a></li>
<li><a href="#">:: Stuff</a></li>
</ul>
</div></td>

And here's the CSS coding for the list:
#navcontainer ul {
list-style-type:none;
margin:0;
padding:0;
display: block;
}
#navcontainer a {
display: block;
color: #606360;
background-color: #EBF4E9;
width:auto;
padding: .2em .8em;
text-decoration: none;
border-bottom: 2px solid #A3A39F;
font-size:10px;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
}
#navcontainer a:hover {
background-color: #E6F0D1;
color: #606360;
}
#navcontainer li {
margin:0 0 0 0;

}

I'm using a doctype of XHTML Strict. My code validates using W3C's validator. I appreciate any help anybody can give me. Thanks.

createErrorMsg

1:13 am on Aug 25, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you tried zeroing out the padding on #navcontainer li and/or the margins on #navcontainer a?

andyhiggs

5:26 am on Aug 25, 2004 (gmt 0)

10+ Year Member



I have and that doesn't help. If I change "width" to 100% on "#navcontainer a" it looks perfect in IE and Netscape, but not Firefox. In Firefox it makes the width of the list a few pixels too wide so I guess 2 out of 3 ain't bad. :)

Noisehag

7:25 am on Aug 25, 2004 (gmt 0)

10+ Year Member



You're not going to believe this, but removing the hard return after each <li> in the code fixed it on my end. A bit messy to look at when editing in the future, but it seems to work.

<li><a href="#">:: Stuff</a></li><li><a href="#">:: Stuff</a></li><li><a href="#">:: Stuff</a></li><li><a href="#">:: Stuff</a></li><li><a href="#">:: Stuff</a></li><li><a href="#">:: Stuff</a></li>

IE is pretty strange...

andyhiggs

5:47 pm on Aug 25, 2004 (gmt 0)

10+ Year Member



Well, that worked on my end too. Why'd you have to tell me that? :) It does make it look messy, but I guess it works. Thanks for everybody's help.

esteele

7:16 pm on Aug 25, 2004 (gmt 0)

10+ Year Member



Try putting "display: inline;" into your #navcontainer li{} rule. That should take care of it too.

Edited to say: All browser bugs are annyoing, but this has to be one of the worst.

andyhiggs

8:23 pm on Aug 25, 2004 (gmt 0)

10+ Year Member



Sweet, that worked and I can leave my coding the way it was. Thanks a lot.