[thelist] Use CSS to control appearance of list items

Peter-Paul Koch gassinaumasis at hotmail.com
Fri Apr 13 03:45:41 CDT 2001


>my experience has been that IE can handle modifications to the LI tag, but 
>that NN tends to ignore them in favor of modifications to the UL tag 
>(especially margins).

The problem is that NN and IE define the placement of the bullets 
differently. If you put a border around a UL you can see this very well, 
like:

UL {
	border-width: 1px;
	border-style: solid;
	border-color: #cc0000;
	margin-left: 100px;
}

(BTW: Defining any padding in this example makes NN6 behave as IE, don't ask 
me why).

Netscape places the bullets inside the border, so the margin of the UL goes 
all the way to the bullets. IE, on the other hand, places the bullets 
outside the border in the margin. As far as I know the specs don't give hard 
rules for the placement of bullets, so neither browser is wrong, it's just a 
difference of opinion.

This is a very nasty problem. You might try the following workaround to get 
the bullets in roughly the same position (not tested extensively):

UL {
  list-style-position: inside;
  margin: whatever;
}

The list-style-position places the bullet inside the border in NN6 and IE, 
while NN4 doesn't support it but places the bullets inside by default. See 
http://www.xs4all.nl/~ppk/css2tests/index.html?lists.html#position for an 
explanation of this declaration.

Finally, if everything else fails, place the bullets perfectly in Explorer 
(85%) and let Netscape (15%) fend for itself.

ppk

_________________________________________________________________________
Get Your Private, Free E-mail from MSN Hotmail at http://www.hotmail.com.





More information about the thelist mailing list