question about lists with css

i am using the following code to display a vertical list, this code
works fine in all browsers except for ie6, in ie6 there is a lot of
vertical gaps between each list item which is not the case in other
browsers and the gap in other browsers appears normally as per the css
code i have written.

<div class="contentright">
<div class="listright">
<ul>
<li><a href="#">List item1</a></li>
<li><a href="#">List item2</a></li>
<li><a href="#">List item3</a></li>
<li><a href="#">List item4</a></li>
<li><a href="#">List item5</a></li>
</ul>
</div>

</div>

.contentright .listright{
float: left;
width: 254px;
height: 140px;
margin: 0 0 0 0;

}

.contentright .listright ul
{
font: normal 11px Arial, Helvetica, sans-serif;
list-style-type: none;
margin: 0 0 0 0;
width: 254px;

}

.contentright .listright ul li
{
margin: 0 0 0 0;

}

#contentouter .contentright .listright ul li a
{
display: block;
padding: 7px 0 0 25px;

}

i have 2 horizontal list in the page above this vertical list which is
causing problem in ie6. i have also given the hierarchy in the css for
this vertical list which is causing the problem in ie6

can anyone suggest how to fix this.

thanks.

 

Because both <ul> and <li> have different default margins and paddings applied to them by different browsers. So unless you set these, or reset them to 0, the default will be applied, and different browsers use different values.

Use this to reset all defaults to:
* { margin:0; padding:0; }

or just for your list:

.contentright .listright ul, .contentright .listright ul li { margin:0; padding:0; }

Change it to a value you need.

I'm assuming this is the problem if it's the gap in between each list-item.

 

thanks for replying.

i have tried all the options

i already have * {margin: 0; padding: 0;} and explicitly set margin and padding to the ul li to 0

i also tried commenting the 2 horizontal list i have above this vertical list and commented the horizontal lists html and css code however the vertical list in ie6 still has the excessive height between each list items.

in all other browsers i do not have this problem it is only with ie6

please advice.

thanks

 

To the anchor, add {zoom: 1;}. See IE white space bug.

cheers,

gary

 

thank you very much

that worked and has fixed the problem for ie6.

what could have been the problem just for my information.

thanks

 

If you're replying to me, read the article I referenced. If you need clarification, ask for more info based on related specifics.

cheers,

gary