'list-style: none' is not working in IE7

Discussion in 'HTML' started by Todd, Mar 5, 2008.

  1. Todd

    Todd Guest

    I have set up my ul to use a graphic button that I have created and I am
    getting mixed results with that in IE7, in FF all is well.

    I have set up a div that is floated left, and within that are two more
    divs floated left to create a two column layout for the ul. When I go to
    the page there are no buttons, if I refresh, there are no buttons;
    however, if I minimize IE and then maximize it again, presto, there are
    the buttons. I can't even begin to explain the mechanics behind that one.

    I have another div (div id="sidebar") and in there I do not want the
    buttons to be visible so I have:

    #sidebar ul {
    list-style: none;
    margin: .5em 0 .5em 10px;
    }

    Again, this works in FF; however, the buttons stay visible in IE7. The code:

    ul {
    list-style-image: url(images/bullet1.gif);
    }

    comes first in the CSS so I would imagine that the list-style:none would
    take precedence, as it does with FF.

    Any thoughts as to what I am missing here?

    http://mysite.verizon.net/leupi5/general.html

    Thanks,
    Todd
     
    Todd, Mar 5, 2008
    #1
    1. Advertising

  2. Todd

    Els Guest

    Todd wrote:

    > #sidebar ul {
    > list-style: none;
    > margin: .5em 0 .5em 10px;
    > }
    >
    > Again, this works in FF; however, the buttons stay visible in IE7. The code:
    >
    > ul {
    > list-style-image: url(images/bullet1.gif);
    > }
    >
    > comes first in the CSS so I would imagine that the list-style:none would
    > take precedence, as it does with FF.
    >
    > Any thoughts as to what I am missing here?


    Try specifically setting 'list-style-image:none' instead of just
    'list-style:none' in the styles for #sidebar ul.

    --
    Els http://locusmeus.com/
     
    Els, Mar 5, 2008
    #2
    1. Advertising

  3. Todd

    Todd Guest

    Els wrote:

    >
    > Try specifically setting 'list-style-image:none' instead of just
    > 'list-style:none' in the styles for #sidebar ul.
    >


    That seems to have worked. Thanks!

    Any thoughts on the mysterious minimize/maximize appearing bullets?

    Thanks,
    Todd
     
    Todd, Mar 5, 2008
    #3
  4. Todd

    Els Guest

    Todd wrote:

    > Els wrote:
    >
    >>
    >> Try specifically setting 'list-style-image:none' instead of just
    >> 'list-style:none' in the styles for #sidebar ul.

    >
    > That seems to have worked. Thanks!
    >
    > Any thoughts on the mysterious minimize/maximize appearing bullets?


    Not really, except that from your first post I read "buttons", so I
    had no idea what you were talking about, and now that I understand you
    are referring to the bullets of the 2 column list in middle of the
    page, I can say that it isn't because you minimize and then maximize.
    It's just that at certain width, there are no bullets.

    You can drag the window from very small to very wide, and the bullets
    will come and go while you do that. One of the moments that the
    bullets disappear, is when the last word on the line before the list
    starts wrapping. Looks like a rounding problem.

    Maybe it helps if you set a width to the div.colWrap. Say, 90%. And/or
    a width to the ul.col1 and ul.col2 (not 50%, take padding/margin and a
    few extra pixels into account). Not sure if it will help, but that's
    what I'd try first if it were my page :)

    --
    Els http://locusmeus.com/
     
    Els, Mar 5, 2008
    #4
  5. Todd

    Todd Guest

    Els wrote:
    > Todd wrote:
    >
    >> Els wrote:
    >>
    >>> Try specifically setting 'list-style-image:none' instead of just
    >>> 'list-style:none' in the styles for #sidebar ul.

    >> That seems to have worked. Thanks!
    >>
    >> Any thoughts on the mysterious minimize/maximize appearing bullets?

    >
    > Not really, except that from your first post I read "buttons", so I
    > had no idea what you were talking about, and now that I understand you
    > are referring to the bullets of the 2 column list in middle of the
    > page, I can say that it isn't because you minimize and then maximize.
    > It's just that at certain width, there are no bullets.
    >
    > You can drag the window from very small to very wide, and the bullets
    > will come and go while you do that. One of the moments that the
    > bullets disappear, is when the last word on the line before the list
    > starts wrapping. Looks like a rounding problem.
    >
    > Maybe it helps if you set a width to the div.colWrap. Say, 90%. And/or
    > a width to the ul.col1 and ul.col2 (not 50%, take padding/margin and a
    > few extra pixels into account). Not sure if it will help, but that's
    > what I'd try first if it were my page :)
    >

    I think that it is a bit more bizarre then that. When I first go to the
    page, the bullets are 'below the fold', I scroll down to them and they
    are not there. If I then refresh (or minimize and then maximize) they
    suddenly show up. If I then scroll up so that say, half of the bullets
    are 'below the fold' and then down again, I only have half of the
    bullets showing. The half that went below the fold are not there when I
    bring that part of the ul back into view. Perhaps it is just on my
    platform that this behavior is exhibited. I do see what you mean by
    changing the window size; however, this issue is independent of that.

    I did; however, find the fix. I added a 'div class="col1"' around the ul
    and took away it's class="col1" and then changed the following CSS from:

    ul.col1 {
    float: left;
    }

    ul.col2 {
    float: left;
    }

    to:

    div.col1 {
    float: left;
    }

    div.col2 {
    float: left;
    }

    The strange behavior went away. I have not yet uploaded the fix, I'm
    wondering if you are able to see the 'below the fold' issue that I was
    talking about? I'm interested to see if that is just me. I am not seeing
    that same behavior on IE5, only on IE7. If you can let me know I will
    then upload the corrected CSS.

    Thanks,

    Todd
     
    Todd, Mar 5, 2008
    #5
  6. Todd

    Els Guest

    Todd wrote:

    > I think that it is a bit more bizarre then that. When I first go to the
    > page, the bullets are 'below the fold', I scroll down to them and they
    > are not there. If I then refresh (or minimize and then maximize) they
    > suddenly show up. If I then scroll up so that say, half of the bullets
    > are 'below the fold' and then down again, I only have half of the
    > bullets showing. The half that went below the fold are not there when I
    > bring that part of the ul back into view. Perhaps it is just on my
    > platform that this behavior is exhibited. I do see what you mean by
    > changing the window size; however, this issue is independent of that.


    Sounds like a variaty of the peek-a-boo family, albeit a weird one.

    > I did; however, find the fix. I added a 'div class="col1"' around the ul
    > and took away it's class="col1"


    [snip]

    See, that's why I never came across this bug then - I never float the
    lists - always in a floated div :)

    > The strange behavior went away. I have not yet uploaded the fix, I'm
    > wondering if you are able to see the 'below the fold' issue that I was
    > talking about? I'm interested to see if that is just me. I am not seeing
    > that same behavior on IE5, only on IE7. If you can let me know I will
    > then upload the corrected CSS.


    You're not the only one, I see the same. But even weirder, which is
    unlike the old peek-a-boo bug: my window is high enough to show the
    whole list on first opening the page, so all the bullets are there.
    Then I drag the bottom border of the window up, and as soon as it
    'touches' the bottom of the lists, the bullets disappear.

    Sounds like one to document properly and send to be listed at
    http://www.positioniseverything.net/explorer.html .

    In fact, it could be related to this one, although that one only is
    apparent in IE6:
    http://www.positioniseverything.net/explorer/ie-listbug.html

    --
    Els http://locusmeus.com/
     
    Els, Mar 5, 2008
    #6
    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. alf
    Replies:
    9
    Views:
    408
  2. length power
    Replies:
    2
    Views:
    78
    Rustom Mody
    Apr 10, 2014
  3. Skip Montanaro
    Replies:
    0
    Views:
    61
    Skip Montanaro
    Apr 10, 2014
  4. Johannes Schneider

    Re: why i have the output of [None, None, None]

    Johannes Schneider, Apr 10, 2014, in forum: Python
    Replies:
    0
    Views:
    52
    Johannes Schneider
    Apr 10, 2014
  5. Terry Reedy
    Replies:
    0
    Views:
    62
    Terry Reedy
    Apr 10, 2014
Loading...

Share This Page