Cross Browser Bullet Image Positioning

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • vunet
    #1

    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
    Tags: cross bullets
    • Ben C
      #2
      Re: Cross Browser Bullet Image Positioning

      On 2008-04-30, vunet <vunet.us@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.

        Comment

        • dorayme
          #3
          Re: Cross Browser Bullet Image Positioning

          In article <slrng1hi7r.4it .spamspam@bowse r.marioworld>,
          Ben C <spamspam@spam. eggswrote:
          On 2008-04-30, vunet <vunet.us@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

            Comment

            • Andy Dingley
              #4
              Re: Cross Browser Bullet Image Positioning

              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.

                Comment

                Previous template Next
                Working...