Ever wonder how to position list-style-image ?
When I created <ul> lists where with custom image instead of predefined circles or squares, it was almost impossible to use the list-style-image attribute. Problem is, that various browser interpret its position differently, so sometimes the image is centered alright to the vertical center of text, and in other browser the image is just too low or too high.
Well until now, the only and common workaround was to put the image on background of <li> and don’t use list-style-image at all. Well, sometimes it’s no obstacle, but sometimes (like when you want some other background for <li>) it’s quite annoying.
Now I found a solution, where in CSS you can use the li:before and display: marker selectors to replace the list-style image itself and create your own marker as you want. You still need to adjust it for older browsers, so you will have to tune the image a bit by adding some space above the image, but for all browsers that support this (which are all modern browsers in actual versions) the image is positioned just the same.
- Positive:
- works in all modern browsers (IE 8, FF, Opera, Chrome, Safari) the same way
- no need to additional wraps, divs etc.. just clear code and all magic in CSS
- Negative:
- doesn’t work in IE 7 (and 6 of course) – needs another styling for older IE 7
Solution
You have classical ul li list where you want your custom marker:
<ul id="example"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Then add the style – look at the example bellow:
/* erase old marker */
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
Unfortunatelly you still have to take care of old Internet Explorer users. IE 7 and older ignores the new marker so you have to leave it the old classical way with list style, and add something like this for IE only:
ul#example list-style-image: url('new_marker.png') !important;
The best way for this is using the condition to add special IE stylesheet in <head> of your page :
<!--[if lte IE 7]> <link href="style_ie7.css" rel="stylesheet" media="screen, projection" type="text/css" /> <![endif]-->
So in the end, the example could look like this:
<html>
<head>
<title>List style image test</title>
<!--[if lte IE 7]>
<style>
ul#example list-style-image: url('new_marker.png') !important;
</style>
<![endif]-->
<style>
ul#example li {
list-style-type: none;
}
/* create new marker */
ul#example li:before {
display: marker;
content: url("new_marker.png");
/* set the following to fit your needs */
vertical-align: 3px;
padding-left: 2px;
padding-right: 12px;
}
</style>
</head>
<body>
<ul id="example">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Žádné příbuzné články.