PDA

View Full Version : Float followed by margin layout issue in IE6


Flupke
19 Aug 2010, 11:31 AM
I have the following situation:



<!DOCTYPE html>

<html lang="en" class="jsPop" id="noJS">


<head>
<title>Float followed by margin</title>
<style>
.label {float:left; width:9em; text-align:right;}
.control {background:red; margin-left:11em; margin-bottom:1em; position:relative;}
.control input {position:relative; margin:0; padding:0;}
</style>
</head>

<body>
<div class="box">
<div class="row">
<div class="label">Choose something</div>
<div class="control"><input type="checkbox" id="field1" name="field" /> <label for="field1">Option 1</label></div>
<div class="control"><input type="checkbox" id="field2" name="field" /> <label for="field2">Option 2</label></div>
</div>
</div>
</body>

</html>


There's a label that is floated and has a fixed width, and there are control items that have a left margin to make them line up.

This works fine in all browsers except IE6. In IE6, an extra whitespace is added to the first control item.

Example code can be found here: http://users.telenet.be/fluppe/testing/float-margin-ie6-issue.html

Any suggestions?
michaelangrave
26 Aug 2010, 04:10 AM
This looks fine in IE6 to me, presumably you've sorted it?

Just for future, or anyone else having this problem. It's one of many known bugs in IE6, called the 'double margin'

If you have a div that floats and has a margin in the same direction, then IE6 will double the size of this margin.

E.g .box {margin-left:20px; float:left;}

This will give a left margin of 40px in IE6.