list-style-image in IE7

Discussion in 'HTML' started by rynato, Dec 1, 2008.

  1. rynato

    rynato Guest

    While fine-tuning a site, I discovered that a list-style-image was
    positioning itself in the vertical middle of the list.

    The CSS is rather complex, so I'm going to refrain from posting it
    here (though I will if requested).

    I've gone through all the styles related (or which seem to be related)
    to the list-style-image; nothing at all seems to affect this middle
    positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
    have not yet checked other flavors of IE). All other browsers position
    the list-style-image at the top of the list.

    For what it's worth, there are nested <ul> inside each <li> though I
    don't see how that should affect the behavior.

    Just wondering if anyone has run into this and might have a solution?
    I have googled quite a bit and it seems that there is no way to change
    the vertical positioning of a list-style-image.

    Because of the nature of how this is used, fixing the position of this
    list-style-image with margin, padding, etc will not work. Each <ul> is
    of different heights and it would be a nightmare to set the position
    of the list-style-image for each <ul>.

    For now, I have used a CSS hack to just turn off the list-style-image
    for all IE browsers.

    Thanks in advance if any of you have useful solutions or hints!!!
    rynato, Dec 1, 2008
    #1
    1. Advertising

  2. rynato wrote:
    > While fine-tuning a site, I discovered that a list-style-image was
    > positioning itself in the vertical middle of the list.
    >
    > The CSS is rather complex, so I'm going to refrain from posting it
    > here (though I will if requested).


    Thank you for *not* posting 1000 lines of code, but what you *should*
    have done was ... (c'on everyone in unison now) ... *post a URL*!

    >
    > I've gone through all the styles related (or which seem to be related)
    > to the list-style-image; nothing at all seems to affect this middle
    > positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
    > have not yet checked other flavors of IE). All other browsers position
    > the list-style-image at the top of the list.


    Precise placement of the bullets, be they characters or images, other
    than inside or outside of the text "block" is up to the user agent and
    not under your control. IE formats lists a bit differently than other
    browsers, but the position of the bullet with respect to the line-height
    is not really controllable. You can play around with the physical
    dimensions of the image and that can help center it among all the
    browsers, but since text size is flexible, success is not assured. You
    may have to live with it...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 1, 2008
    #2
    1. Advertising

  3. rynato

    C A Upsdell Guest

    rynato wrote:
    > While fine-tuning a site, I discovered that a list-style-image was
    > positioning itself in the vertical middle of the list.
    >
    > I've gone through all the styles related (or which seem to be related)
    > to the list-style-image; nothing at all seems to affect this middle
    > positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
    > have not yet checked other flavors of IE). All other browsers position
    > the list-style-image at the top of the list.


    I assume you are speaking of the vertical position of the image.

    I have found that Opera puts it higher than most browsers. I have also
    found that some browsers place it closer to the list item than other
    browsers.

    A workaround which I have found effective is to add three extra
    transparent rows and columns to the image, at the top and to the right
    of the image, when I create the image. The extra rows at the top have
    the effect of shoving the image down by 3 pixels. The extra columns at
    the right have the effect of ensuring that at least a 3 pixel gap
    appears between the image and the list item.
    C A Upsdell, Dec 1, 2008
    #3
  4. rynato

    rynato Guest

    On Dec 1, 8:35 am, C A Upsdell <> wrote:
    > rynato wrote:
    > > While fine-tuning a site, I discovered that a list-style-image was
    > > positioning itself in the vertical middle of the list.

    >
    > > I've gone through all the styles related (or which seem to be related)
    > > to the list-style-image; nothing at all seems to affect this middle
    > > positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
    > > have not yet checked other flavors of IE). All other browsers position
    > > the list-style-image at the top of the list.

    >
    > I assume you are speaking of the vertical position of the image.


    yes, that's why I wrote, "vertical middle" ;-)
    >
    > I have found that Opera puts it higher than most browsers.  I have also
    > found that some browsers place it closer to the list item than other
    > browsers.
    >


    it looks fine in every browser EXCEPT IE, which stubbornly insists on
    putting it in the middle of the <ul>

    the odd thing is, I remember an early version of the site and it
    positioned just fine. So, something I have done since then is causing
    it to reposition. I may try digging up an early version of this page
    and see if I can track down what happened.

    > A workaround which I have found effective is to add three extra
    > transparent rows and columns to the image, at the top and to the right
    > of the image, when I create the image.  The extra rows at the top have
    > the effect of shoving the image down by 3 pixels.  The extra columns at
    > the right have the effect of ensuring that at least a 3 pixel gap
    > appears between the image and the list item.


    you mean like with a table? GAH!

    This is just replacing the default disc with a little arrow image.

    I think I may just have to live with not having it appear in IE
    browsers. It's not vital, just a nice little design element.
    rynato, Dec 1, 2008
    #4
  5. rynato

    Bergamot Guest

    rynato wrote:
    > While fine-tuning a site, I discovered that a list-style-image was
    > positioning itself in the vertical middle of the list.
    >
    > This does not happen in Safari 3 nor FF3; only in IE7


    I am quite familiar with this stupid behavior and have not found a way
    around it except to set list-style:none and make the marker a background
    image on the <li> instead. If you don't want to punish other browsers
    for IE's behavior, you can put those rules in a conditional comment.

    --
    Berg
    Bergamot, Dec 1, 2008
    #5
  6. rynato

    C A Upsdell Guest

    rynato wrote:
    > On Dec 1, 8:35 am, C A Upsdell <> wrote:
    >>> A workaround which I have found effective is to add three extra

    >> transparent rows and columns to the image, at the top and to the right
    >> of the image, when I create the image. The extra rows at the top have
    >> the effect of shoving the image down by 3 pixels. The extra columns at
    >> the right have the effect of ensuring that at least a 3 pixel gap
    >> appears between the image and the list item.

    >
    > you mean like with a table? GAH!


    NO!

    I mean changing the image for the marker, by making it 3 pixels taller
    and 3 pixels wider, with the extra top and right pixels being transparent.
    C A Upsdell, Dec 1, 2008
    #6
  7. rynato

    rynato Guest

    On Dec 1, 12:32 pm, C A Upsdell <> wrote:
    > rynato wrote:
    > > On Dec 1, 8:35 am, C A Upsdell <> wrote:
    > >>> A workaround which I have found effective is to add three extra
    > >> transparent rows and columns to the image, at the top and to the right
    > >> of the image, when I create the image.  The extra rows at the top have
    > >> the effect of shoving the image down by 3 pixels.  The extra columns at
    > >> the right have the effect of ensuring that at least a 3 pixel gap
    > >> appears between the image and the list item.

    >
    > > you mean like with a table? GAH!

    >
    > NO!
    >
    > I mean changing the image for the marker, by making it 3 pixels taller
    > and 3 pixels wider, with the extra top and right pixels being transparent..


    C A, I am not sure how that is supposed to make the image float to the
    top of the list... in any case, each <ul> set is going to be of
    varying heights depending on how many <li> are contained and the text
    rendering of each browser.

    Maybe I am being dense? Can you explain how adding 3 transparent
    pixels at the top and right would accomplish the vertical alignment at
    the top?
    rynato, Dec 2, 2008
    #7
  8. rynato wrote:

    > C A, I am not sure how that is supposed to make the image float to the
    > top of the list... in any case, each <ul> set is going to be of
    > varying heights depending on how many <li> are contained and the text
    > rendering of each browser.
    >
    > Maybe I am being dense? Can you explain how adding 3 transparent
    > pixels at the top and right would accomplish the vertical alignment at
    > the top?


    Yes, you are....where is the URL??? It sounds like you are doing
    something unorthodox|incorrect and we need to actually *see* what you
    are attempting! The bullets in a list are associated with each LI not UL

    <ul>
    <li>FEE</li>
    <li>FIE</li>
    <li>FOE</li>
    <li>FUM</li>
    </ul>

    produces

    * FEE

    * FIE

    * FOE

    * FUM

    not

    FEE

    FIE
    *
    FOE

    FUM


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 2, 2008
    #8
  9. rynato

    Guest

    On Dec 2, 7:19 pm, rynato wrote:
    > I am not sure how that is supposed to make the image float to the
    > top of the list...


    Did you validate your page both HTML and CSS?
    ( maybe with validator.w3.org and jigsaw.w3.org/css-validator )
    , Dec 2, 2008
    #9
  10. rynato

    GTalbot Guest

    On 1 déc, 09:51, rynato <> wrote:
    > While fine-tuning a site, I discovered that a list-style-image was
    > positioning itself in the vertical middle of the list.
    >
    > The CSS is rather complex, so I'm going to refrain from posting it
    > here (though I will if requested).
    >


    Please, never post code in newsgroup; just post an URL. Make sure your
    markup code is valid first.

    > I've gone through all the styles related (or which seem to be related)
    > to the list-style-image; nothing at all seems to affect this middle
    > positioning. This does not happen in Safari 3 nor FF3; only in IE7 (I
    > have not yet checked other flavors of IE). All other browsers position
    > the list-style-image at the top of the list.



    Vertical-align should NOT and must NOT apply to <ul> with list-style-
    image
    http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/#bug68

    vertical-align must only apply to inline-level and to "table-cell"
    elements. Vertical-align is not inherited. CSS 2.1, Section 10.8.1,
    vertical-align

    This bug was fixed in IE 8 beta 2.


    > Just wondering if anyone has run into this and might have a solution?
    > I have googled quite a bit and it seems that there is no way to change
    > the vertical positioning of a list-style-image.


    List-markers are not supposed to be movable vertically to begin with.

    Regards, Gérard
    GTalbot, Dec 6, 2008
    #10
  11. GTalbot wrote:

    >> Just wondering if anyone has run into this and might have a solution?
    >> I have googled quite a bit and it seems that there is no way to
    >> change the vertical positioning of a list-style-image.

    >
    > List-markers are not supposed to be movable vertically to begin with.


    Well, right, in the sense that CSS currently offers no way to affect them.
    I'm sure many people would _want_ list markers (whether characters or
    images) to be movable.

    There are different workarounds, like
    a) putting markers (as images or as text characters) into list item content
    (and using list-style-type: none !important to suppress any
    browser-generated markers); works on all browsers, makes marker position
    styleable, but requires extra work and care
    b) using generated content and styling it, to the extent it can be styled;
    does not work for most users since generated content still has poor support
    c) making the marker image a background image for list item element (for
    which you set some suitable left padding), using background positioning to
    set the vertical position.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Dec 6, 2008
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    410
  2. Laszlo Zsolt Nagy
    Replies:
    1
    Views:
    1,263
    Kartic
    Jan 26, 2005
  3. Jeff Louella

    IE7 on XP vs IE7 on Vista

    Jeff Louella, Mar 1, 2007, in forum: HTML
    Replies:
    9
    Views:
    511
    Adrienne Boswell
    Mar 2, 2007
  4. Todd
    Replies:
    5
    Views:
    20,760
  5. Ken Varn
    Replies:
    0
    Views:
    439
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page