Hi all,.,.
does anyone know how to get the text next to these tick bullets on this page aligned:
Ive tried playing with everything, padding, margins…
What am i missing?
http://www.bluecrushdesign.co.za/lottery/mainhow.html
Thanks!
Hi all,.,.
does anyone know how to get the text next to these tick bullets on this page aligned:
Ive tried playing with everything, padding, margins…
What am i missing?
http://www.bluecrushdesign.co.za/lottery/mainhow.html
Thanks!
aaah thanks…
Semantics wise it’s the same, however background images give you much more consistant results, and you can easily modify the position if needed
I don’t see why it is any less semantically correct - the HTML (ie, the semantics) is exactly the same!
Yes perhaps semantics wasn’t the word I was meaning to say. Accessible would have been a better word.
The problem with using a background image is that if the image is missing or images have been turned off then you get no bullet displayed at all and no visual clue that it’s a list.
On the other hand if you use list-style image and the image is missing the bullet gets displayed by default.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
ul.bullet {
list-style-image:url(images/bull20.gif)
}
ul.bullet2 li {
list-style:none;
background:url(images/bull20.gif) no-repeat 0 5px;
padding:0 0 0 20px;
margin:0;
}
</style>
</head>
<body>
<ul class="bullet">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="bullet2">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
</html>
Unfortunately you can’t change the positioning of the list-style image and it varies considerably between browsers. Most people simply use a background image instead which you can place with pixel perfection but of course is not as semantically correct.