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

[Todd]

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

 

[Els]

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

 

[Todd]

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

 

[Els]

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

 

[Todd]

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

 

[Els]

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