Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    The First State
    Posts
    233
    Thanks
    9
    Thanked 0 Times in 0 Posts

    div position out of whack in IE6 but fine in all others

    Everything works fine in Safari, FF and IE7 but my divs get messed up in IE6 and I can't figure out why. The green div gets pushed down in IE6. I've attached a screenshot that shows IE6 on top and the other browsers on the bottom. Anyone have any ideas?



    Here's the code (ignore the ie stylesheets. They are not used for this portion of the design):
    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">
    <head>
    <title>test</title>
    <style type="text/css">
    
    html {height: 100%; overflow: auto;}
    body {height: 100%; font: normal 12px/1.2 Arial, Helvetica, san-serif; color: #666; background: #063060 url("images/bgd_body.png"); padding:36px 0 36px 0;}
    * {margin: 0;padding: 0;}
    #wrap {width: 770px; height: auto; min-height: 98%; margin: 0 auto; /*padding-bottom: 40px;*/ text-align: left;}
    * html #wrap {height: 98%;}
    
    #headertop {width: 770px; height: 42px;}
    #headersubtop {width: 770px; height: 127px;}
    h1#toptopImg {background: url("yellow.gif") no-repeat left top; height: 42px; text-indent: -2000px;}
    
    #topImg {background: url("red.gif") no-repeat left top; height: 127px; width: 495px;}
    #midImg {background: url("green.gif") no-repeat left top; height: 219px; width: 495px; }
    
    #randomImg {height: 349px; width: 276px; border: none; margin-left: 495px; padding-left: 0; z-index: 9000;}
    </style>
    <!--[if lte IE 7]>
    <link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
    <![endif]-->
    
    <!--[if IE 7]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
    <![endif]-->
    </head>
    <body>
    <div id="wrap">
    
    <div id="headertop"><h1 id="toptopImg">this</h1> </div>
    <div id="topImg">
    <div id="randomImg">
    <img src='blue.gif' alt='Athletes' />
    </div>
    </div>
    
    <div id="midImg">
    
    </div>
    </div>
    
    
    
    
    
    <!--closes wrap-->
    <div style="clear: both;"></div>
    </div>
    <!-- footer -->
    <!--#include virtual="includes/footer.html" -->
    </body>
    </html>
    Attached Thumbnails Attached Thumbnails div position out of whack in IE6 but fine in all others-test.gif  
    Last edited by finstah1; 11-02-2007 at 03:25 PM. Reason: fixed it


 

Posting Permissions

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