Click here to get back home

Cross Browser Bullet Image Positioning

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Cross Browser Bullet Image Positioning vunet 04-30-2008
Posted by vunet on April 30, 2008, 2:55 pm
Please log in for more thread options
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

Posted by Ben C on April 30, 2008, 3:31 pm
Please log in for more thread options
> 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.

Posted by dorayme on May 1, 2008, 1:24 am
Please log in for more thread options

> > 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

Posted by Andy Dingley on May 1, 2008, 5:05 am
Please log in for more thread options
> 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 <li> between
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.

Similar ThreadsPosted
Problem positioning text over an centered image September 22, 2005, 6:07 pm
Image Positioning Inside Table Problem (IE only) January 2, 2008, 8:09 am
PHP output errors leading to cross-browser mistakes? Mac errors but PCs are fine. January 28, 2005, 1:31 pm
Cross Domain Cookies April 25, 2005, 2:17 pm
question about cross site scripting March 4, 2005, 8:35 pm
Cross platform HTML (IE not following standards?) April 3, 2005, 7:46 am
css positioning June 3, 2005, 4:14 am
positioning layers April 25, 2006, 7:40 am
CSS positioning: why does this work? May 15, 2006, 2:12 pm
CSS positioning pickle July 11, 2006, 9:15 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap