Aligning LI and UL bullets with CSS

Custom bullets in LI and UL tags refuse to behave

[bladeaussie]

G'Day Everyone,

After many many years of using transitional html, I've decided to finally convert it to XHTML Strict and CSS.

So far I havn't had any problems that I couldn't fix by doing a google search, but I've hit a snag with my LI and UL's with CSS.

I've been able to create my custom bullets fine using CSS, but for some reason I simply can not get them to align with the text beside them. For some reason, each bullet is slightly higher, and no matter how much I have played around with the CSS attributes I set, I can not get everything to behave itself.

In my style tags, I'm using this:

ul {list-style-image: url(media/gel_bullet.gif);}

li {text-align: left; margin: 1em; line-height: 1em; padding: 1em;}

I would be most grateful for any assistance!

Cheers

Blade

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

[edited by: SuzyUK at 4:54 pm (utc) on Feb. 7, 2005]

[bladeaussie]

Ooops....I forgot to mention that this problem appears when I use MSIE 6.

When I view the page in Mozilla, they line up correctly.

How confusing :(

Cheers

Blade

[kaled]

I have a vague idea that for horzontal alignments of this type, you should use an absolute value such as cm (centimetres) rather than em, however, I've never tried this.

Kaled.

[bladeaussie]

I'm sorry, but I don't quite understand what you mean by that?

[monkeythumpa]

IE gives me the same problem so what I do is insert an "_". Let me show you . . .

li {text-align: left; margin: 1em; _margin: 2em; line-height: 1em; padding: 1em; _padding: 2em;}

Mozilla will ignore the values with the "_" in front of them but IE uses them and they override the previous value. All you have to do is tweak the first value so it works in Mozilla and then the second to work in IE.

[bladeaussie]

Thanks for that idea Monkey, but I couldn't get that to work either.

However, I did manage to find what was causing the problem, it's the Padding attribute in the LI. So I took it out, and the result doesn't look too bad...but the bullets are a bit to close to the text (horizontally).

Would anyone happen to know how to change the space between a bullet and the text beside it in a UL/LI list?

Cheers

Blade

[firstreflex]

Don't use list-style-image, that's always a mess, set the bullet as the background for the li

ul{
list-style:none;
}
li{
background-image:url(media/gel_bullet.gif) no-repeat 0 50%;
padding-left:?px;
}