IE6 vs IE7 vs Firefox

programming web dev
1

Hello all,

having a little problem with some CSS that I’m writing. At the moment I’m inline coding everything just because I find it easier to do that first, then do a stylesheet. Here is my code:

 
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 background-image: url();
}
-->
</style>
</head>
<body>
<div align="center">
<!--parentContainer-->
<div id="parentContainer" style = "width:802px; height:920px; z-index:1;align:centre; background-color:#FFFFFF">
<!--leftColumn-->
<div id="leftColumn" style = "width:11px; height:920px; z-index:1; float:left"><img src="Media/GIFs/pageDropShadowLeftGIF.gif" /></div>
<!--rightColumn-->
<div id="rightColumn" style = "width:11px; height:920px; z-index:1; float:right"><img src="Media/GIFs/pageDropShadowRightGIF.gif" /></div>
<!--centreColumn-->
<div id="centreColumn" style = "width:780px; height:920px; z-index:2;">
<!--flashNavTopShadow (insideCC)-->
<div id="flashNavTopShadow" style="width:780; height:14;position:relative; top:0px;"></div>
<!--logoDiv(insideCC)-->
<div id="logoDiv" style="width:780px; height:120px;">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="168" height="93" vspace="15">
    <param name="movie" value="awakersLogo_v3.swf" />
    <param name="quality" value="high" />
    <embed src="awakersLogo_v3.swf" width="168" height="93" vspace="15" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
  </object>
</div>
<!--flashNavTopShadow (insideCC)-->
<div id="flashNavTopShadow" style="width:780; height:14;position:relative; top:1px;"><img src="Media/GIFs/flashNavTopShadowGIF.gif" height="14"; width="778"></div>
<!--flashNavigation (insideCC)-->
<div id="flashNav" style="width:780px; height:40px; position:relative; top:0px;left:1px">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="779" height="40">
    <param name="movie" value="awakersNavigation_v2.swf" />
    <param name="quality" value="high" />
    <embed src="awakersNavigation_v2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="779" height="40"></embed>
  </object>
</div>
<!--centreFlashBorderTop (insideCC)-->
<div id="centreFlashBorderTop" style="width:780; height:7;position:relative; top:-1px;left:0px"><img src="Media/GIFs/centreFlashBorderTopGIF.gif" width="780px"; height="7px"></div><!--centreFlashBorderBottom (insideCC)-->
<div id="centreFlashBorderTop" style="width:780; height:7;position:relative; top:193px;left:0px"><img src="Media/GIFs/centreFlashBorderTopGIF.gif" width="780px"; height="7px"></div>
<!--newsColumnHeader (insideCC)-->
<div id="newsColumnHeader" style="width:365;height:40;position:relative;top:205px;left:-192px"><img src="Media/GIFs/currentNewsGIF.gif" /></div>
<!--projectColumnHeader (insideCC)-->
<div id="projectColumnHeader" style="width:365;height:40;position:relative;top:159px;left:195px"><img src="Media/GIFs/awakersProjectShowcaseGIF.gif" /></div>
<!--gradientDivider (insideCC)-->
<div id="gradientDivider" style="width:2; height:303; position:relative; top:159px"><img src="Media/GIFs/gradientDividerGIF.gif" />
</div>
</div>
<!--bottomShadow-->
<div id="bottomShadow" style = "width:780px; height: 15px; z-index:1; position:relative;top:-20px;left:0"><img src="Media/GIFs/pageDropShadowBottomGIF.gif" width="780" height="15" /></div>
</div>
</div>
</body>
</html>

Now I know that’s a big mess but let me explain my problem. Basically the div called centreColumn appears directly below the parentContainer div in IE6 rather than fitting inside of it like it does perfectly in IE7 and firefox. Now I have kind of fixed it by making the dimensions of the parentContainer slightly wider and adjusting the other divs accordingly, but I just don’t understand why the other divs aren’t being contained within the 802px width when they do not exceed that width…and I don’t really want to muck around with it cuz I have it looking perfect in IE7 and Firefox…

Any help will be much appreciated people, thanks in advance!