Results 1 to 2 of 2

Thread: Website middle column breaks in ie7 and ie8 compatibility mode.

  1. #1
    Join Date
    Oct 2009
    Posts
    2

    Website middle column breaks in ie7 and ie8 compatibility mode.

    It loads correctly in Firefox and IE8, but the middle column breaks in ie7 and ie8 in compatibility mode.

    By break I mean the middle column gets shifted to the right and below the right column (while still in the middle column)
    View the link in ie7 or ie8 compatibility mode to see what I mean.
    http://www.thestardock.net/index.php
    I have also included the general layout and css below.

    I have tried changing doc types and a few small things but nothing has even effected the appearance.

    The website is in a layout like this:
    HTML Code:
    <div id="wrapper1">
    	<div id="wrapper2">
    		<div id="maincol">
    		
    			<div id="leftcol">
    			</div>
    			
    			<div id="rightcol">
    			</div>
    			
    			<div id="centercol">
    			</div>
    			
    		</div>
    		
    		<div id="footer">
    		</div>
    		
    	</div>
    </div>
    HTML Code:
    #centercol {
    	position:relative;
    	padding:0 200px;
    	min-width: 520px;
    }
    #leftcol { 
    	position:relative;
    	top:-10px;
    	left:-10px;
    	float:left;
    	width:180px;
    	margin:0 0 -10px 0;
    	padding:10px;
    	z-index:100;
    	}
    #rightcol {
    	position:relative;
    	top:-10px;
    	right:-10px;
    	float:right;
    	width:180px;
    	margin:0 0 -10px 0;
    	padding:10px;
    	z-index:99;
    }
    #maincol {
    	position:relative;
    	margin:0;
    	padding:10px;
    }
    
    #wrapper1 {
    	position:relative;
    	text-align:left;
    	width:100%;
    	min-width: 950px;
    	background:#23415C url("images/side.gif") repeat-y top right;
    }
    	
    #wrapper2 {
    	position:relative;
    	text-align:left;
    	width:100%;
    	background:url("images/side.gif") repeat-y top left;
    }

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    Your wrapper is min-width: 950px; the left and right columns are 180 + 2*10px padding = 2*200px leaving a space of 550px.

    Your #centercol has side padding of 200px which increases its width to 920px so it doesn't fit in the middle space of 550px in IE7 ( Firefox guessed that you didn't mean that) so change the padding to margin which allows the side columns to fit in the margins
    #centercol {
    position:relative;
    /*padding:0 200px;*/ margin: 0 200px;
    min-width: 520px;
    }

    You also have an unclosed comment here (which wasn't part of the problem)
    #rightcol {
    position:relative;
    top:-10px;
    right:-10px;
    float:right;
    /* width:200px; /* for IE5/WIN */
    width:180px; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    z-index:99;
    }
    which should be
    #rightcol {
    position:relative;
    top:-10px;
    right:-10px;
    float:right;
    /* width:200px;*/ /* for IE5/WIN */
    width:180px; /* actual value */
    margin:0 0 -10px 0;
    padding:10px;
    z-index:99;
    }
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

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