View Full Version : div position out of whack in IE6 but fine in all others

11-01-2007, 01:58 PM
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):

<!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">
<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;}
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />

<!--[if IE 7]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
<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 id="midImg">


<!--closes wrap-->
<div style="clear: both;"></div>
<!-- footer -->
<!--#include virtual="includes/footer.html" -->