On 5/13/05, Ingo Chao <[EMAIL PROTECTED]> wrote: > > Hi Justin > > > FYI, I've posted this bug to quirksmode.org but it hasn't shown up > > yet. Hopefully it will soon. > > Nice catch! > > > This rendering bug in Internet Explorer 6.0 causes text in a div with > > a background color followed by a div which floats to the left and > > another which is clear on the left to be invisible. All styling on the text > > is also > > invisible (such as background colors and text colors). > > http://pear.reversefold.com/badIE/ > > I hope you allow a discussion on your test findings (as you write > "FYI"). I post this offlist, though. If you want to discuss it on-list, > feel free to cite.
Of course, I meant this as an announcement of the finding. CCing to the list. > > regards, Ingo > > ############################# > > A semi-transparent bg-image like > http://www.satzansatz.de/cssd/tmp/justin.html > > (IE6 XPSP2 1280*1024, cleared cache, reducing the width by dragging the > window+reload) > > reveals: The text is invisible because the div is stacked /under/ its > parent background layer. > Ah, I wouldn't have thought of that. > (And when the container is positioned relative, then the _float_ is > "disappearing": > http://www.satzansatz.de/cssd/rpfloat.html) > This is also interesting, but there's a difference. If you highlight the "hidden" text in my bug the text and all styling appears. (Or if you scroll the window off of the hidden text and back on it). The hidden float bug *doesn't* show up when you highlight the text. > The trigger of this and similar bugs is a float that expands (changes > its 'intrinsic' dimensions) a container without "layout". > > Or, to put it simple, trying to contain a float can be buggy when the > container has no dimension. > > (These bugs can be filed under "dimensional bugs" in order to summarize > them in one branch with one fix.) > > Normally, a non-layouted parent won't contain the float. With this > clearer, the height of the parent is determined by the height of the > content /and/ the float. I guess IE6's problem is that this makes the > un-layouted parent dependent on its layouted (floating) child. > > -> A element having layout can change the layering of dependent elements. > > -> The bug is fixed by giving layout to the parent, i.e. via the Holly hack. Ah, it makes more sense now. The Holly Hack probably does work, but I stumbled across this page: http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp which says that the zoom property also gives a box layout. So I tried zoom: 100% in my div and lo and behold, it works. Much better than the table hack I was using. I've added this workaround to my page: http://pear.reversefold.com/badIE/workaroundZoom.html > > > "To keep the styling and still have the text show up, wrap it in a table" > -> According to MSDN, some elements (body, img, input, table, td (?), > control, iframe, marquee, hr) have layout by default. > > >"Removing any one of the three divs causes the text to appear > Remove the outer div" > -> Then the parent of the float is body, that's equal to putting it in a > table. > > >"Remove the floating div". > -> That's the trigger. > > > "Remove the clear div" > Without this clearer, the height of the container will not be determined > by the float. > > > "Removing any of the three styles causes the text to appear > Remove the background color." > -> The background layer /hides/ its childs. > > Again, interesting catch! > Thanks for the help and the commentary. You've obviously much more experience in IE rendering bugs than I do. :-) -- Justin Patrin ______________________________________________________________________ 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/
