• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

Margin is too large in IE6

I've got a simple test page that contains 4 divs.  The first 3 are floated left and have margin-left of 50px, and the last one clears the float and also has a margin-left of 50px.  What I expect is for the first and last divs to line up, since they both have the same margin on the left side.  Mozilla seems to do this, IE6 does not.  I've got a strict doc type, so I assume it's not a quirksmode issue.  I assumed it was an IE bug having to do with float touching the clearing element, but even if I set a margin-top on .clear, the divs didn't line up.  What am I missing?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
.myFloat {
  float: left;
  margin-left: 50px;
  width: 150px;
  height: 175px;
  border: 1px solid black;
}

.clear {
  clear: both;
  width: 600px;
  margin-left: 50px;
  margin-right: 50px;
}
</style>
</head>

<body>
<div class="myFloat">TEST</div>
<div class="myFloat">TEST</div>
<div class="myFloat">TEST</div>

<div class="clear">CLEAR</div>
</body>
</html>
0
dakyd
Asked:
dakyd
  • 2
  • 2
1 Solution
 
KupiCommented:
It's an IE bug but there's a workaround ;)

Just add a "display: inline;" to your myFloat class declaration, like this:

.myFloat {
  display: inline; /* prevent IE doubled float-margin bug */
  float: left;
  margin-left: 50px;
  width: 150px;
  height: 175px;
  border: 1px solid black;
}

For more info please visit:
http://www.positioniseverything.net/explorer/doubled-margin.html
0
 
COBOLdinosaurCommented:
The bug in IE is that it does the clear wrong.  To line them up just float the "clear" div:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
.myFloat {
  float: left;
  margin-left: 50px;
  width: 150px;
  height: 175px;
  border: 1px solid black;
}

.clear {
  float: left;
  width: 600px;
  margin-left: 50px;
  margin-right: 50px;
}
</style>
</head>

<body>
<div class="myFloat">TEST</div>
<div class="myFloat">TEST</div>
<div class="myFloat">TEST</div>

<div class="clear">CLEAR</div>
</body>
</html>
0
 
dakydAuthor Commented:
Yup, that did the trick.  Funny, I was looking through Holly & John's site before I posted, but I didn't see that section.  Thanks though, that makes one more random IE bug I know how to kill.  Cheers.
0
 
COBOLdinosaurCommented:
changing the display to inline is not necessary and my cause other rendering problems if you have to put other elements inside the final div.

Cd&
0
 
dakydAuthor Commented:
Oops, sorry Cd&, I didn't notice your post there.  According to the CSS2 spec (and the link that Kupi posted), when an element is positioned with float: left:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

The last line, in this case, indicates that there won't be any rendering problems, but for some odd reason, it means that IE behaves properly.

I did try your suggestion, but it creates a horizontal scrollbar in IE, which wasn't the original intention.  Thanks for the input, though.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now