Consistent list items in browsers

[mumford1]

Hi

Does anyone know how to display list items so they look the same in IE and NN.

Whenever i add a class for list items, the spacing between the list items differ between the 2 browsers (netscape they are normally not as spaced vertically)

CSS

ul.leftmenu{
margin-top:15px;
margin-left: 0;
padding-left: 0px;
list-style: none;
}
ul.leftmenu li{
font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
margin-top: 5px;
padding-left: 15px;
border: 0;
background-image: url(../images/bullet.gif);
background-repeat: no-repeat;
background-position: 0 63%;
white-space:nowrap;
}
ul.leftmenu li a{
font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
color:#EBE8D4;
text-decoration:none;
margin-top:0;
padding:0;
}
ul.leftmenu li a:hover{
font:10px Verdana, Arial, Helvetica, Geneva, sans-serif;
color:#9D936A;
text-decoration:none;
}

This bugs me everytime, could someone offer there assistance please

cheers!!

[polvero]

rather than background image for lists, I use the css attribute list-style-image

#id li { 
list-style-image: url(images/bullet.gif);
}

[Paul O'B]

Hi,

I find background images more consistent in lists as there is no way to position list-images correctly cross browser. However it is the proper way to do it (if there is a proper way ),

I think the question above was about spacing in lists rather than images and all you need to really know is that some browsers use padding for the initial spacing of lists and some browsers use margin.

Therefore you need to control both. I usually set both to zero and then adjust the padding that I want.

ul, li {margin:0;padding:0}
li {margin-left:10px}

Something like that have a play around with it until you see how its working. Lists can be a pain at times but are structurally sound and worth persevering with.

Paul

[KDesigns]

Slap this hack into your CSS and it should take care of your problem with spacing in IE

/* Fix IE. Hide from IE Mac \*/
* html #leftmenu ul li { float: left; }
* html #leftmenu ul li a { height: 1%; }
/* End */