Chris Leipold <cl******@dietzk.de> writes:
Hi again,
Chris Leipold wrote: I have an ul with a custom bullet symbol, like that:
ul {
list-style-image:url(foo.png);
}
Does anyone know a way to define the vertical alignment of
the image?
I tried line-height, padding and margin but the results aren't very good.
I now found a workaround:
ul {
list-style:none;
}
li {
margin:0;
padding:0;
padding-left:40px;
background-image:url(../img/logo_faq.png);
background-repeat:no-repeat;
background-position:12px 8px;
}
It's not exactly right, but it does exactly what I want...
Might not something like this be more appropriate:
@media screen {
li:before {display: marker;
content: url("../img/logo_faq.png");
vertical-align: 8px; /* choose this ... */
padding-right: 12px; /* and this */
}
li {list-style-type: none; }
}
As far as I can tell, setting the list-style-type to none
shouldn't be necessary; to quote REC-CSS2:
When the 'display' property has the value 'marker' for
content generated by an element with 'display:
list-item', a marker box generated for ':before' replaces
the normal list item marker.
but firefox 1.0PR displays both a bullet and an image if I leave
it out.
--
Jón Fairbairn
Jo***********@cl.cam.ac.uk