#1
  1. Super Genius
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Orlando, Florida
    Posts
    314
    Rep Power
    13

    CSS Positioning Issue with IE


    I've been hearing a lot about the benefits of CSS positioning over tables so I decided to give it a try myself.

    Below is the code for a template page I whipped up in an attemt to have a two column layout centered directly in the screen. All is well except when I try to view the document using Internet Explorer.

    As you can see in this image, Internet Explorer renders an 8 to 10 pixel gap between the two columns. This image shows Mozilla Firebird rendering the page how I expected it to be displayed. To see this in action for yourself, go to http://www.p0w3r.com/test.htm.

    The CSS
    Code:
    /* Tag Redefinitions */
    body {
    	background-color: #E7E7E7;
    }
    
    /* Main Container DIVs */
    #leftColumnParent {
    	position: absolute;
    	left: 0px;
    	top: 20px;
    	width: 50%;
    	text-align: right;
    }
    #rightColumnParent {
    	position: absolute;
    	left: 50%;
    	top: 20px;
    	width: 50%;
    }
    
    
    /* Content Container DIVs */
    #rightRow1 {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    #rightRow2 {
    	position: absolute;
    	top: 166px;
    	left: 0px;
    }
    #rightRow3 {
    	position: absolute;
    	top: 333px;
    	left: 0px;
    }
    The Layout
    Code:
    <div id="leftColumnParent">
      <img src="images/splashLargeBlock.jpg" width="356" height="489" alt="Left Column Data" />
    </div>
    <div id="rightColumnParent">
      <div id="rightRow1"><img src="images/splashTopBlock.jpg" width="345" height="166" alt="Row One Data" /></div>
    
      <div id="rightRow2"><img src="images/splashMiddleBlock.jpg" width="345" height="167" alt="Row Two Data" /></div>
      <div id="rightRow3"><img src="images/splashBottomBlock.jpg" width="345" height="156" alt="Row Three Data" /></div>
    </div>
    Sleep is highly overrated.
  2. #2
  3. meep!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    on the good ship lollypop
    Posts
    247
    Rep Power
    31
    it works fine on msie if you use:
    #rightColumnParent {
    position: absolute;
    left: 49%;
    top: 20px;
    width: 50%;
    }

    relative values are tricky because different browsers interpret them in different ways?

    but how about using:

    Code:
    /* Main Container DIVs */
    #contain { position: absolute; width: 100%; height: 100%; }
    
    #leftColumnParent {
    	position: relative;
    	right: 0px;
    	top: 10px;
    	width: 50%;
    	text-align: right;
    }
    #rightColumnParent {
    	position: absolute;
    	left: 50%;
    	top: 10px;
    	width: 50%;
    }
    
    
    /* Content Container DIVs */
    #rightRow1 {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    }
    #rightRow2 {
    	position: absolute;
    	top: 166px;
    	left: 0px;
    }
    #rightRow3 {
    	position: absolute;
    	top: 333px;
    	left: 0px;
    }
    -->
    </style></head>
    
    <body>
    <div id="contain">
    <div id="leftColumnParent">
      <img src="images/splashLargeBlock.jpg" width="356" height="489" alt="Left Column Data" />
    </div>
    <div id="rightColumnParent">
      <div id="rightRow1"><img src="images/splashTopBlock.jpg" width="345" height="166" alt="Row One Data" /></div>
      <div id="rightRow2"><img src="images/splashMiddleBlock.jpg" width="345" height="167" alt="Row Two Data" /></div>
      <div id="rightRow3"><img src="images/splashBottomBlock.jpg" width="345" height="156" alt="Row Three Data" /></div>
    </div>
    checked in msie and netscape and it worked. don't have mozilla installed though
    Last edited by miseria; November 3rd, 2003 at 02:50 PM.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    35
    Rep Power
    11

    Cool


    you can also play with
    padding: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;

    these should help remove the gaps in ie
  6. #4
  7. Super Genius
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2002
    Location
    Orlando, Florida
    Posts
    314
    Rep Power
    13
    Thanks a lot guys. It works great now.
    Sleep is highly overrated.

IMN logo majestic logo threadwatch logo seochat tools logo