SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapping absolutely positioned columns in IE

    Hi, I am testing in the latest version of IE 7.0 and I have three columns absolutely positioned.

    It works fine in Firefox 1.5 and seems to work OK in IE but when I refresh IE the 2nd column overlaps the 3rd. Is this common? does anyone know a solution?

    Here is my CSS

    body.threecolbal div#page {
    width:auto;
    background-image:none;
    position:relative;
    min-width:400px;


    }


    body.threecolbal div#page div#col1 {
    width:30%;
    border:none;
    background-image : url(interface/vdots-blue.gif);
    background-repeat : repeat-y;
    background-position :right;
    padding-right:2%;
    min-height:600px;
    }

    body.threecolbal div#page div#col2 {
    width:30%;
    left:35%;
    border:none;
    background-image : url(interface/vdots-blue.gif);
    background-repeat : repeat-y;
    background-position :right;
    top:0;
    position:absolute;
    padding-right:2%;
    min-height:600px;

    }

    body.threecolbal div#page div#col3 {
    width:30%;
    left:70%;
    border:none;
    min-height:600px;
    top:0;
    position:absolute;

    }

    Thanks
    Steven

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    not sure how you want this ? seems to work in IE7

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{height:100%;}
    	*{padding:0;margin:0;}
    	
    	#page {
    	position:relative;
    	min-width:400px;
    	}
    
    	#col1,#col2,#col3{top:0;width:30%;min-height:600px;padding-right:2%;position:absolute;}
    	* html #col1,* html #col2,* html #col3{height:600px;}
    
    	#col1{left:0;background:#ffffcc url(interface/vdots-blue.gif) repeat-y right;}
    	
    	#col2{left:35%;background:#ccffcc url(interface/vdots-blue.gif) repeat-y right;}
    
    	#col3{left:70%;background:#ccffff;padding-right:0;}
    	* html #col3{left:69.9%;}
    	</style>
    </head>
    <body>
    <div id="page">
    <div id="col1">1</div>
    <div id="col2">2</div>
    <div id="col3">3</div>
    </div>
    </body>
    </html>


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
  •