When I use "float: left;" to render an unordered list horzontally, it picks up the parent divs background image after scrolling in IE6 (version 6.0.2900.2180). When I switch to "display: inline;" on the <li>s the background issue goes away.
My first question is, obviously, why? My second question is, background image wierdness aside, is it preferable to use one method over the other? I seem to recall float being better for screenreaders, but can't remember for sure. Instructions: Go to the "float" page (link below) and scroll down until the top sunset image is obscured, and then scroll back up. In IE6, the background will repeat in the area of the sunset directly to the left of the "item - item - item - item" nav (which is a <ul> with <li> set to float: left;). The background sunset image is set on the patent <div> which contains the <ul>. Float: http://beaconfire.beaconfire.com/extranets/redrawbug/float.html Inline: http://beaconfire.beaconfire.com/extranets/redrawbug/inline.html And here's a screenshot, if your browser doesn't display the problem: http://beaconfire.beaconfire.com/extranets/redrawbug/screen.jpg The HTML in question is: <div id="toppic"> <ul> <li class="nobg">Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pulvinar, enim eget facilisis sollicitudin, magna felis mollis ligula, quis mollis metus nulla non ante.</p> <p><a href="#">Read about our history & mission >></a></p> </div><!-- close "toppic" div --> And the CSS: #toppic { background: #9f4926 url(../images/toppic.jpg) no-repeat; margin: 0; color: #f0edda; padding: 20px 0 10px 0; } #toppic p { margin-left: 325px; padding-top: 5px; clear: both; } #toppic a { font-size: 0.8em; color: #f0edda; text-decoration: none; } #toppic a:hover { text-decoration: underline; } #toppic ul { margin: 0 0 1.4em 312px; padding: 0; color: #f8f0ed; font-weight: 100; font-size: 1.5em; list-style-type: none; } #toppic ul li { float: left; padding-left: 13px; padding-right: 8px; background: #9f4926 url(../images/bullet-home-toppic.gif) no-repeat; background-position: 0 .3em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; } #toppic ul li.nobg { background: none; } #toppic h2 span { color: #cea290; } Thanks! Tim ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
