Float followed by margin layout issue in IE6

**Flupke** · 19 Aug 2010, 10:31 AM

I have the following situation:

HTML Code:

<!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/testi...ie6-issue.html

Any suggestions?

**michaelangrave** · 26 Aug 2010, 03: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.

Thread: Float followed by margin layout issue in IE6

Thread Tools

Float followed by margin layout issue in IE6

Similar Threads

2 column layout on PC shows as 1 column on mac

Need help urgently! My site wont display properly in firefox!

Posting Permissions