How to indent bullets to the left in html?

S

Scooby

New member
If you want cross-browser results, that means the same design in all browsers, you're going to have to use a little trick: using a background image for the list bullet. Here's the CSS for that:

ul li {
list-style: none;
background: url (images/bullet.jpg) 0px 2px no-repeat; /* the 2 pixels are usually enough to lower the bullet to align it with the text */
padding-left: 10px; /* the padding should be the with of the bullet image plus a few pixels to separate the text from it */
}

You might want to also specify a with for the li in case you want columns. Take into consideration the reset CSS mentioned by the above user.
Hope this helps.
 
If you want cross-browser results, that means the same design in all browsers, you're going to have to use a little trick: using a background image for the list bullet. Here's the CSS for that:

ul li {
list-style: none;
background: url (images/bullet.jpg) 0px 2px no-repeat; /* the 2 pixels are usually enough to lower the bullet to align it with the text */
padding-left: 10px; /* the padding should be the with of the bullet image plus a few pixels to separate the text from it */
}

You might want to also specify a with for the li in case you want columns. Take into consideration the reset CSS mentioned by the above user.
Hope this helps.
 
That's because lists have margins and padding set to them by default.

What you can do is when you create the list add some CSS to it like this:

<ul style="padding:0;margin:0;">
or
<ol style="padding:0;margin:0;">

This gives slightly different results in Firefox and IE so take a look in both.
 
I'm putting align paragraph left and then list item, but my bullets wind up centered and ugly.
Make that alihn my bullets on the left . . .
 
Back
Top