468,119 Members | 1,690 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,119 developers. It's quick & easy.

Cross Browser Bullet Image Positioning

When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning? Please advise a nice hack.
Thanks
Jun 27 '08 #1
3 3233
On 2008-04-30, vunet <vu******@gmail.comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning?
You can't. The spec just tells browsers to put the bullet somewhere
sensible (for list-style-position: outside) outside the LI's principal
block box.

However it sounds from your description like there may be floats
involved, which is a different can of worms.
Please advise a nice hack.
I only advise nasty hacks.

Your only hope to position it precisely is not to use a list item bullet
but make it an element in its own right (either an IMG or something with
a background image).

But there are other solutions to the floats and bullets issue, if that's
what you're having.
Jun 27 '08 #2
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-04-30, vunet <vu******@gmail.comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6. IE6 puts the image on top and
far from left LI's border. Firefox puts it nicely in the middle and
very close to left border.
How do I control bullet image positioning?

You can't. The spec just tells browsers to put the bullet somewhere
sensible (for list-style-position: outside) outside the LI's principal
block box.

However it sounds from your description like there may be floats
involved, which is a different can of worms.
Please advise a nice hack.

I only advise nasty hacks.
<g>

How about a really friendly nice hack. A table! Bullet in one col, item
in the next, row by row, happily down.

And, guess what, some lists (perhaps all) are tables in their essential
semantics - so it is not even a hack. If you have an appropriate image
for each item, different is best, pregnant with meaning is better still,
then Bob can still be your uncle on the semantic front.

--
dorayme
Jun 27 '08 #3
On 30 Apr, 19:55, vunet <vunet...@gmail.comwrote:
When I use image as a bullet within LI element I have different image
positioning results in Firefox and IE6.
This may be as simple as the different default CSS for <libetween
browsers. Some use margin to position things, others use padding. If
you ever change one of these settings, you need to take explicit
control and set _all_ of them.
Jun 27 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Bryan R. Meyer | last post: by
7 posts views Thread by Nikolaos Giannopoulos | last post: by
34 posts views Thread by Marian Aldenhövel | last post: by
8 posts views Thread by Udo Marx | last post: by
1 post views Thread by manakin | last post: by
7 posts views Thread by salvador | last post: by
4 posts views Thread by celoftis | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.