ul li bullets not aligning

**escapedf** · Oct 1, 2010 04:56

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!

**Paul O'B** · Oct 1, 2010 05:03

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.

**escapedf** · Oct 1, 2010 05:28

aaah thanks..;-)

**Stevie D** · Oct 1, 2010 15:37

Originally Posted by Paul O'B

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.

I don't see why it is any less semantically correct - the HTML (ie, the semantics) is exactly the same!

**RyanReese** · Oct 1, 2010 15:40

Semantics wise it's the same, however background images give you much more consistant results, and you can easily modify the position if needed

**Paul O'B** · Oct 2, 2010 01:36

Originally Posted by Stevie D

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.

Code:

<!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>

User Tag List

Thread: ul li bullets not aligning

Thread Tools

Display

ul li bullets not aligning

Bookmarks

Bookmarks

Posting Permissions