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.

in ie6 there is a lot of vertical gaps between each list item

Typical IE6 bug.
Use conditional comments to call a SEPARATE 'fixes only' css file JUST for IE6. For your vertical list ID or class add height: 1%;, that will close the big gaps.

www.positioniseverything.net - I suggest you start reading about IE's many bugs and the solutions.

you can see Conditional Tags

<!--[if IE 6]>
Special instructions for IE 6 here

<![endif]-->
See examples Here