Sent by Tuttle Grey on 18 April 2002 17:05
Some other folks also posted that they were fighting bugs with float/clear,
so I thought I'd summarize what I *think* I know in hopes that it may
benefit someone.
It's incredible that after all this time every major browser still has bugs
with float and clear. I was using floats way back with NN4.x, but version 5
and version 6 browsers still have bugs that trigger with various uses and
contexts of float/clear. Sad.
!! SOLUTION NEEDED !!
If anyone can figure a workaround to enable the use of DIV to clear floats
in IE6 (and even IE5.x) without the bug, I'd be grateful. I'd rather use a
DIV, and using a hack I can even hide the DIV from IE5, but then IE6 still
has a bug if "clear" is done on any element other than a BR.
QUICK SUMMARY
Bug 1. Using "clear:both" on any element other than a BR, after a
"float:right", triggers bugs in IE5.x and IE6. These bugs cause the left
margin of the container (BODY or DIV) to be lost, or can simply lose the
left border of a container.
Bug 2. Using "float" can trigger a disappearing/reappearing text bug in IE6.
This bug causes some text to disappear and/or reappear as the cursor hovers
over links.
REFRESHER
I have images set to float either left or right, depending on class:
IMG.right { float: right; margin: 1em 0 2em 25px; border: 0;}
When I want to stop subsequent text from floating around the preceding
image, I used a DIV:
DIV.clear {clear: both;}
( or <DIV style="clear: both"></DIV>, the bug is identical).
HTML:
<IMG CLASS="right" SRC="HPO.gif" WIDTH="250" HEIGHT="155" ALT="">
<P>There is a bunch of text here with a link or two in the paragraph.
There is a bunch of text here with a link or two in the paragraph. <A
HREF="#">Link here</A> This text disappeared in IE6 when the cursor hovered
over the link. That was "fixed" by setting a high level DIV to
position:relative. </P>
<DIV class="clear">
I prefer to use DIV to clear floats, rather than a BR, as DIV does not add
an extra line of vertical space the way BR does.
PROBLEM - BUG 1
IE5.xWin Lost left margin, IE6Win lost left border
Using "clear:both" on any element other than a BR, after a "float:right",
triggers bugs in IE5.x and IE6. These bugs cause the left margin of the
container (BODY or DIV) to be lost, or can simply lose the left border of a
container. IE5.x will lose the left margin, while IE6 hides or loses the
left border of the container.
The only element that could take the "clear: both" after a "float:right"
without triggering the IE bugs was a BR. This is not ideal because a BR
adds a lot of unwanted vertical space, especially in NN6. I used the Tantek
hack to feed a BR clear to IE5.x while feeding DIV clear to everyone else
until IE6 then displayed its version of this bug.
Workaround partial: I used the Tantek hack (see end of this message for my
code) to feed a BR clear to IE5.x (since that's all it will accept without
losing the left margin) while giving everyone else a DIV with clear. That
worked fine until I noticed that IE6 was losing the left border on the
container unless the clear was done on a BR. It's likely significant that
both IE5 and IE6 display a problem with left border/margin after clearing a
"float:right", suggesting that part of the engine has been retained from IE5
to IE6.
PROBLEM - BUG 2
IE6Win Disappearing/reappearing content
Using floats in some contexts (maybe just right floats, but I need to test
more) causes IE6 to hide some text or images, only to reveal them upon hover
over a link or upon refresh. Sometimes moving the cursor between two links
will cause content to toggle between invisible and visible. It's a bizarre
effect to see.
It's a complicated bug affected by floats, the container that contains the
floated element, background colour or URL, and clear. This makes it very
difficult to diagnose and correct, since there are several different
combinations of valid code that can trigger the IE6 bug. Even more
insidious: the same page will trigger the bug on some installations of IE6
but not on others. I don't know why this varies by PC.
Workaround 1: nest the floated elements within the P. (This is not
acceptable for all layouts, as in some contexts when a floated IMG is nested
in a P, NN6 will render only that para's text beside the floated IMG.
Subsequent paras drop below the IMG.)
Workaround 2: remove any "background" property from any upper-level DIVs
that contain the floated content.
Workaround 2: set "position:relative" on an upper-level container such as a
DIV.
BUG 3
NN6Win Not respecting float space
In some contexts NN6 renders text over top of floated elements, even though
the CSS is valid.
USED TANTEK HACK TO CLEAR ON DIV OR BR DEPENDING ON BROWSER
HIDING DIV FROM IE5: IE5 GETS A BR, EVERYONE ELSE GETS A DIV
Anyway, I have a workable, albeit inelegant, solution*. I use the Tantek
hack to let IE5.x clear floats using a BR, so as not to trigger the
margin-left bug, but all other browsers will have floats cleared with a DIV.
(* I thought it was a solution until I saw that IE6 loses the left border
under the same conditions.)
You can see it at
http://www3.sympatico.ca/alantext/TestDesign/SampleYellow.htm
In the HTML, I have to have use elements for each clear, one to be used by
IE5.x, one to be used by all other browsers. e.g.:
<BR class="clearIE5">
<DIV class="clear"></DIV>
Here's the style info.:
/* using Tantek hack, clearing the float is done via a BR in IE5.x, to avoid
IE5.x bug. For other browsers the clear will be done via a DIV to avoid the
extra line of height that a BR renders. */
BR.clearIE5 { clear: both; /* IE5.x will use this clear */
voice-family: "\"}\""; /* hide "display:none" from IE5.x */
voice-family:inherit;
display: none; } /* other browsers will not render the BR */
html>body BR.clearIE5 { display: none; } /* allow Opera to recover and get
correct value */
DIV.clear {
voice-family: "\"}\""; /* hide "clear:both" from IE5.x */
voice-family:inherit;
clear: both; } /* other browsers will use this DIV to clear
floats */
html>body DIV.clear { clear: both; } /* allow Opera to recover and get
correct value */
NEW PROBLEM, unrelated to the above solution
Now, if someone could please tell me why the 1px yellow left border on the
outer DIV is disappearing in IE6, I'd be very grateful.
_________________________________________________________________
MSN Photos is the easiest way to share and print your photos:
http://photos.msn.com/support/worldwide.aspx
