Solved

Margin is too large in IE6

Posted on 2004-10-13
5
371 Views
Last Modified: 2008-02-01
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
Comment
Question by:dakyd
  • 2
  • 2
5 Comments
 
LVL 3

Accepted Solution

by:
Kupi earned 250 total points
ID: 12305840
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12309343
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
 
LVL 19

Author Comment

by:dakyd
ID: 12309359
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12309377
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
 
LVL 19

Author Comment

by:dakyd
ID: 12309452
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

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Help in CSS 5 38
Column Spacing 3 38
Add code to body in wordpress site 8 37
Adding Bootstrap 3 to Angular 2 application 4 38
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now