IE6 CSS floating element margin bug

Recently, I was doing my blog redesign and I faced strange IE6 behavior. Search box floating div didn't want to float all a way to a right. I tried to tweak child and parent margins and finally I solved this mystery. However, I did not understand a root of a problem. Today, I was reading Smashing Magazine article about IE6, IE7, IE8 css differences and I found it.

Left and right margins are doubled on floated elements that touch their parents' side edges. What a surprise! This a real bug of IE6 and I didn't know about it. I knew about min-width/min-height problem, attribute selectors and other IE6 bugs, but this one I didn't know. Probably I faced it before, but never paid attention to it. So, if you face strange positioning problem of floating elements in IE6, know this is well known IE6 bug. Below is a simple illustration of the problem. Right div should have 30px right margin. In IE6 it shows up as 60px.

.left

{

    width:100px;

    height:100px;

    background-color:aqua;

    float:left;

}

.right

{

    width:100px;

    height:100px;

    background-color:aqua;

    float:right;

    margin-right:30px;

}

#parent

{

    overflow:hidden;

    width:300px;

    border:solid 1px black;

}

<div id="parent">

    <div class="left">

    </div>

    <div class="right">

    </div>

</div>

 

 

IE6 double margin bug


Posted on Wednesday, October 14, 2009 by | Comments (2) | Add Comment

Comments

Gravatar

Re:IE6 CSS floating element margin bug

Thanks for sharing your ideas, it so useful to everyone ...

Posted on 10/16/2009 11:39:10 PM by Wollongong Web Design #
Gravatar

Re:IE6 CSS floating element margin bug

.right

{

width:100px;

height:100px;

background-color:aqua;

float:right;

margin-right:30px; _margin-right:30px;

}

/*Use (_)underscore for IE6 - it will work.

Posted on 10/25/2009 11:56:03 AM by srinivasarao marturi #
Gravatar

Thank your for your comment. Here is one of my previous posts about browser conditional comments:

http://www.karpach.com/Browser-specific-css-IE-conditional-comments.htm

New Comment

Your Name:
Email (for internal use only):
Comment:
 
Code above:

Categories

Recent Tweets

  • Simon Ince's Blog: Hierarchies with HierarchyID in SQL 2008 http://t.co/xSDwiF6rRS.
  • Visual Studio 2010 WAS painfully slow - CodeProject http://t.co/Usba1x6CZy

Valid HTML5