SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question My Box is pushed down when viewed in IE6

    I am using XHTML 1.0 Strict and I have 3 div which are placed inside a big div. the layout look fine with IE7,8, Safari, and FF but not with IE6. in IE6, the 3rd box is pushed down. I have no idea why.

    below is my HTML code:

    HTML Code:
    <body>
    	<div id="wrap">
        	<div id="box1"></div>
            <div id="box2"></div>
            <div id="box3"></div>
        </div>
    </body>
    and this is my style
    HTML Code:
    <style type="text/css">
    *
    {
    	margin:0;
    	padding:0;
    }
    
    #wrap 
    {
    	width: 729px;
    	height: 443px;
    	padding-top:157px;
    	background:#F0F;
    	margin: 0 auto;
    }
    
    #wrap #box1, #wrap #box2, #wrap #box3
    {
    	float:left;
    	width: 172px;
    	height: 172px;
    
    }
    #wrap #box1
    {
    	background:#fe0000;
    	margin: 0 27px;
    }
    #wrap #box2
    {
    	background:#00ff00;
    	margin: 0 51px;
    }
    #wrap #box3
    {
    	float:right;
    	background:#0000fe;
    	margin: 0 27px;
    }
    </style>
    Last edited by brown_eyes; Jul 8, 2009 at 19:19.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2005
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found the solution:
    just add the display: inline;
    #wrap #box1, #wrap #box3
    {
    display: inline;
    margin-left: 27px;
    margin-right:27px;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when float and margin is in the same direction, the margin does not display correctly in IE6. This is called double-margin bug.
    Your code
    {
    float:left;
    margin: 0 27px;
    }

    triggered the bug.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •