On 12/1/05, Eric Porter <[EMAIL PROTECTED]> wrote: > I have a very curious issue happening. > I think it's a browser error but I wonder if anyone can > think of a way to prevent it.
I've seen this before and blogged it a long time ago at http://geek.focalcurve.com/archive/2004/02/the-ie6-randomly-bulleted-menu-bug/ The problem (best guess here) seems to stem from applying the bullet graphic to a generic element selector, which we then override with a later, more specific selector. IE gets confused and initially renders them with the general style, and only applies the more specific one in response to some action (hovering, scrolling, etc). The workaround I advised two years ago was to not use a generic selector to style *all* lists, but to give it a bit more specificity to only style lists in a certain context. That may not work in your case since the form lives inside #content, so I'm not sure how you could really differentiate between list items inside #content and list items -inside a form- inside #content -- the first rule would still apply to both. However, that doesn't matter because I now recommend an entirely different approach... I've pretty much abandoned "list-style-image" for two reasons: this IE issue and inconsistent positioning across browsers. Instead, I suggest using a background image for graphical bullets: ul li { list-style: none; margin-left: 0; padding-left: 15px; background: transparent url(bullet.png) 2px 4px no-repeat; } Different browsers use different properties to indent list items, so zeroing the margin-left and specifying padding will ensure consistency. Use adequate padding to make room for your bullet graphic however wide it may be. Then by applying the bullet as a background image, you gain control over its positioning: in the shorthand example it's positioned 2px from the left and 4px from the top. Lastly, "no-repeat" makes sure it doesn't tile across the entire list item. Then override it: form ul li { list-style: none; margin-left: 0; padding-left: 0; background-image: none; } The background-bullet technique is popular and well-proven, and I've never had a problem with it in any browser worth mentioning. And since it's not using list-style-image it doesn't trigger the wierdness in IE. -- Craig, www.focalcurve.com ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
