wie man Listensymbole, die mit der Eigenschaft list-style-image eingebunden wurden, positionieren kann.
<head>
<style>
ol {
list-style-image: url(pic.gif);
}
li {
padding : 0px;
margin-top : -4px;
font-size : 12px;
line-height :17px;
font-family:arial,helvetica,sans-serif;
}
/* Versteht nur IE (Weiche) */
li {margin-top:0px!}
</style>
</head>
<body>
<ol>
<li>bla</li>
<li>MMMMMMM</li>
<li>bla</li>
<li>BBBBBBBBBBB</li>
<li>MMMMMMM</li>
<li>bla</li>
<li>bla</li>
</ol>
</body>
</html>
Listensymbole positionieren
Hier ein Beispiel zur Erklärung:
<html><head>
<style>
ol {
list-style-image: url(pic.gif);
}
li {
padding : 0px;
margin-top : -4px;
font-size : 12px;
line-height :17px;
font-family:arial,helvetica,sans-serif;
}
/* Versteht nur IE (Weiche) */
li {margin-top:0px!}
</style>
</head>
<body>
<ol>
<li>bla</li>
<li>MMMMMMM</li>
<li>bla</li>
<li>BBBBBBBBBBB</li>
<li>MMMMMMM</li>
<li>bla</li>
<li>bla</li>
</ol>
</body>
</html>
Das Symbol (pic.gif) hat oberhalb einen 4 Pixel-großen transparenten Rand, damit es im IE runterrutscht.