SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One of my boxes is jumping up and down in IE

    If you look at this in ie 6 or 7 at 800px wide you will notice that the right box has moved down below the level of the middle box.

    If you then slowly resize your window wider or narrower (doesn't matter) by two pixels at a time, the right box will alternate between this lower position and the position it appears in firefox, opera, safari, etc, etc, etc.

    HTML Code:
    	<body>
    		<div id="wrapper">
    			<div id="header">
    			</div><!--header-->
    			<div id="extras-wrapper">
    				<div id="extras">
    					<p>This is inside extras, the large box on the left. It is getting a width of 50% and an orange background.</p>
    					<p>This is inside extras, the large box on the left. It is getting a width of 50% and an orange background.</p>
    				</div><!--extras-->
    			</div><!--extras-wrapper-->
    			<div id="contentL-wrapper">
    				<div id="contentL">
    					<p>This is inside contentL, the middle box. It is getting a width of 25% and a green background.</p>
    				</div><!--contentL-->
    			</div><!--contentL-wrapper-->
    			<div id="contentR-wrapper">
    				<div id="contentR">
    					<p>This is inside contentR, the small box on the right. It is also getting a width of 25% and a yellow background. What is going on in IE. I shake my head in despair.</p>
    				</div><!--contentR"-->
    			</div><!--contentR-wrapper-->
    		</div><!--wrapper-->
    	</body>
    Code CSS:
    body {
    	margin: 0;
    	padding: 0;
    	text-align: center;
    }
     
    #wrapper {
        min-width: 762px;
        max-width: 960px;
        margin: 0 auto;
    }
     
    /*
        the following gives us min/max width in lte IE6
        using all greater than compares avoids the
        'less than' bug which can hang IE
    */
     
    * html #wrapper {
        width: 762px; /* if scripting is off, fix the width to 800 friendly */
        width: expression(
            (document.body.clientWidth>992) ? "960px"
                : ((document.body.clientWidth>766) ? "auto" : "762px")
        );
        height: 1%; /* forces hasLayout */
    }
     
    /* THANK YOU DAN SCHULZ */
     
    #header {
    	height: 217px;
    	margin: 0;
    	position: relative;
    }
     
    #extras-wrapper{
    	width: 50%;
    	float: left;
    	background-color: orange;
    }
     
    #extras {
    	margin: 0 10px 0 20px;
    	background-color: #fff;
    }
     
    #contentL-wrapper {
    	width: 25%;
    	float: left;
    	background-color: green;
    }
     
    #contentL {
    	margin: 0 10px 0 10px;
    	background-color: #fff;
    }
     
    #contentR-wrapper {
    	width: 25%;
    	float: right;
    	background-color: yellow;
    }
     
    #contentR {
    	margin: 0 20px 0 10px;
    	background-color: #fff;
    }

    What's that all about then?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a probably a rounding issue. You have three columns (50&#37;+25%+25%) which should total to 100% but in IE it sometimes totals to 101%.

    Here is excerpt from Paul O'B's FAQ on floats: (http://www.sitepoint.com/forums/show...5&postcount=15)

    FAQ : 50% float + 50% float = 101% !

    Sometimes if you put 2 or more floats side by side with percentage widths then the float drops up and down on every odd pixel, as the page is re-sized. This is a rounding bug in IE (other browsers do sometimes have their own rounding bugs) and in cases where the odd numbered pixels are rounded up then the total width becomes greater than the space allocated thus causing the float to drop.
    The solution is to make one float slightly smaller so that the rounding error is negated.e.g. 49.9%. A neater way is still to make both elements 50% (or whatever adds up to 1000% exactly) and then just apply a 1px negative margin to one of the sides on just one of the floats. For the first float thats floated left you could add a margin-right:-1px which will drag its right edge 1px smaller and counteract the rounding error.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Addict palgrave's Avatar
    Join Date
    Jan 2006
    Posts
    357
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers JimmyPaddy. I used the -1px negative margin method and it worked perfectly.

    Also, thanks for being so nice about me not reading the FAQ.


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
  •