View Full Version : Bring <li> text closer to the bullets in IE?

03-11-2009, 03:37 PM
This might be a really basic problem but I can't find a solution.

I'm trying to solve a small problem here with a <ul>. I am using list-style-type:square; and I can't get the bullet points to mash up closer to the text in the list items in IE. I used text-indent:-12px; to fix it for FF (which worked perfectly), but in IE it just moved everything, bullets and all, to the left 12px.

Does anyone know a good way to bring the bullet points in closer to the text in IE?

03-11-2009, 03:40 PM
I had this issue a while back; Aero suggested a great, cross-browser friendly solution (http://codingforums.com/showthread.php?t=140370).

03-11-2009, 03:49 PM
Yeah, this was my plan B. I think I might fall back on this if all else fails, but I'm hoping to avoid extra content for users to download.

Thanks for the link, though!

03-11-2009, 03:59 PM
I mention the "span hack" in the post linked to; that might be something you want to try if you want to avoid the download. All it consists of is wrapping the list content in a span:


and giving it some left padding:

li span {

If you have a conditional stylesheet for IE you could customize the padding accordingly.

03-11-2009, 04:39 PM
OK, I'll fidget with that for a while and see if I can get it to do what I want it to.