Topic: list-style woes in IE

hello, i use

list-style: url(.....gif) circle }

to set a nice colored button for my list items.

the problem is that in IE this graphic is very close to the beginning of the text, while in FF and OP it is some pixel away from that.

is there a way to move the button in IE some pixels to the left, without adding extra pixels to the image itself, cause that would cause the button to move leftwards in FF and OP too.

thanks!

so... you have played with the margin and padding? That'd be my first try.

no.
i didnt know you can set margin and padding on li.

i'll try it now. thanks TP!

edit: typo



(Edited by GRUMBLE on 01-31-2006 18:04)

Failing that, you could make your gif slightly wider (with a transparent edge), and that would work as well.

list-style-image is notoriously crap across different browsers at present - use a background image

^ agreed.

background-image for the li is the way to go.

quote:

---

GRUMBLE said:

no.
i didnt know you can set margin and padding on li.

---

Of course - it's a box like any other.



(Edited by DL-44 on 01-31-2006 20:14)

a third for the background-image, much less frustrating

thanks guys, but whatever solution i use, the offset is still something different in IE than in FF or OP.

all i want is to have my list look the same in all three major browsers.

this is the current code i use:

li.bullet {
	list-style-type:none;
	background-image:url(.....gif);
	background-repeat:no-repeat;
	background-position: 0px 4px;
	padding-left:5px;
	margin-left:0px;
}

I'd start with ul, li { margin: 0; padding: 0; } and go from there. Should be gettable pretty close to identical that way

(*cough*)

To go slightly further - start with

ul {
 padding:0;
} 

ul li {
 padding:0;
 margin:0;
}

Adjust the padding and margins on the ul li until you're happy with it.
I would also apply the class to the ul (or even the div or other element that contains it) rather than to the li.

thanks again guys!
that did the trick!

in case anyone is interested, here is the full code i use now:

ul {
padding:0;
} 

ul li {
padding:0;
margin:0;
}

li.x {
list-style-type:none;
background-image:url(punkt_6.gif);
background-repeat:no-repeat;
background-position: 0px 8px;
padding-left:8px;
}

note to self: always set all paddings, margins and never rely on the default values.

defaults are okay, as long as you know how each browser does it

http://www.w3.org/TR/CSS21/sample.html is good as a reference if you forget what has what by default (though no browsers follow it strictly, more's the pity)