Hi there,
Allegedly, the Double-Margin Float bug has been fixed in Internet Explorer 7.
I've been toying around with some javascript lately and it turns out that
when you tickle IE7 in the right way, it will reveal just how this
double-margin float bug has been 'fixed'.
When you set a margin on a float, and then by using some javascript you
change any of the positioning properties ('top', 'left' etc), the double
margin float bug disappears in IE6. In IE7, the margin is _subtracted_ from
the position, instead! I assume this is because they implemented a
'quick hack': always subtract the margin from the position of a float, to
counter the double margin effect. Unfortunately, this backfired and resulted
in a new variant of the bug, a sort of 'negative margin float bug'.
I don't know if this is a known bug or how well-known this problem is, but I
hope someone out there has seen this before and knows a workaround.
Here is a testcase:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>
<html>
<head>
<title>Float margin weirdness</title>
</head>
<body>
<div id="red" style="background-color: red; width: 1000px; height: 50px;
position:relative">
<div id="green" style="background-color: green; position: relative; width:
50px; height: 50px; margin-left: 50px; left: 50px; float: left;"></div>
</div>
<a href="#" onclick="changeleft(); return false;">without accessing offset</a>
<a href="#" onclick="changeleft_with_offset(); return false;">with accessing
offset</a>
<script type="text/javascript">
function $(x) { return document.getElementById(x); }
function changeleft() {
$('green').style.left = '52px';
}
function changeleft_with_offset() {
var x = $('green').offsetLeft;
$('green').style.left = '53px';
}
// Enable the following to see the bug directly:
//var x = $('green').offsetLeft;
//$('green').style.left = '51px';
</script>
</body>
Simply clicking either of the links will trigger the bug and the green box
will jump 50px (the size of the margin). Oddly enough,
when the code outside the functions is uncommented, the bug is triggered
right away. When the offset properties are not touched (so the code looks
like changeleft instead of changeleft_with_offset), the bug does _not_
get triggered. Aren't these offset properties supposed to be read-only and
side-effect free? I also don't understand how putting the code in a
function changes the behaviour.
I have tried to apply the display: inline fix to negate the double-margin
float bug, but this did not work. I think the combination of float:left
and position: relative breaks the fix. This leads me to a final question:
is it allowed to combine float+posrel? I can't find any mention of how
this combination is supposed to behave in the spec. I found a post by
Peter-Paul Koch on this same question at
http://archivist.incutio.com/viewlist/css-discuss/37762
but it didn't have any replies :(
Regards,
Peter Bex
Solide ICT - http://www.solide-ict.nl
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
