Width between bullet and list item text

css issue in internet explorer

[wolrabp]

Hi,

I am just wondering if anyone knows a workaround for the following problem.

I am displaying unordered list items on my page with a small image as a bullet. My problem is in Firefox the distance between the bullet and the text of the list item is perfect however in IE6 and possibly other versions the image that i use as a bullet is right on top of the text in the list.

I dont know if my explanation is great but maybe a makeshift diagram might help! The bullet image below is represented by ¦b¦ and the text of the list item is represented by ¦text¦.

Firefox:

¦b¦ ¦text¦
¦b¦ ¦text¦
¦b¦ ¦text¦

IE 6:

¦b¦¦text¦
¦b¦¦text¦
¦b¦¦text¦

Is there any way to ensure internet fishtrawler will display the bullets the same distance from the text as FF does?

Thanks in advance

[alias]

Those both browsers assign different paddings/margins to the elements, so it would be best to describe your own paddings/margins in the css - this should make them look alike on both browsers.

I hope it helps,
M.Saulis

[wolrabp]

Do i apply the padding/margin to the li element or the ul element? Would that not just indent my list?

[gulliver]

Zeroing the margin and padding on both the ul and the li will remove the default indent... and the space between the ul and elements above/below it. It provides a level base from which to tweak. And you do need to set both - IE requires one, other browsers the other.

Applying right padding or margin to the bullet image will determine the space between it and the li.

A vertical gap between the whole ul and content above/below may then be restored by adding margin/padding - though be aware of margin collapse.

[wolrabp]

gulliver,

Could you provide an example, the method you discuss above seems to open up the possibility of more errors across other browsers, what i am looking for is an IE specific fix?

[gulliver]

The method I suggest is the reliable cross-browser solution.

[pageoneresults]

If you are referring to the space between the "bullet" and when the text begins, I didn't know that you could control it as gulliver points out. This has been a thorn in my side ever since I can remember. I've just accepted it as is and focus on micro-managing other formatting issues. ;)

[wolrabp]

Yes it has been annoying me for quite some time also, it would be nice to see an example posted here of Gulliver's method . . .

[gulliver]

External url ahead...

[css.maxdesign.com.au...]

[wolrabp]

Thanks Gulliver that worked a treat

[gulliver]

Happy to help - I've learned too... I thought it could be done with a foreground image - wasn't until I tried that I realised that whilst the spacing can indeed be changed it can't be done totally reliably.

[wolrabp]

i used the code on the link you gave me, tweaked the backgound position slightly and then tested it across multiple operating systems and browsers using browsercam.com, it seemed to look pretty standard across all platforms!