I am having difficulty getting IE6 to 'play nice' with the layout I'm trying to create (perhaps it's too specific and I'll have to try another approach.)
The page in question can be found at http://myersprojects.com/uk/en/index.html
I am using the 960.gs grid system, and have a number of custom styles defined (including a conditionally included stylesheet for IE6). If you examine the center of the page in Firefox or Chrome or IE8 (haven't tested 7 yet) you will see the layout that I'm trying to achieve, however in IE6 this seems to gain extra padding and/or margin to the right of the flash image. I've battled for a number of hours trying to make this extra gap go away, but don't seem to be breaking it, so am asking for a little help :)
Thanks in advance.
Edit for code example:
HTML
<div id="body" class="container_16 clearfix">
<div class="grid_5 omega">
<div id="options1">
<ul>
<li id="web" class="selected"><a href="web_and_digital_projects.php">Web & Digital Project Delivery</a></li>
<li id="project""><a href="projects_and_programmes.php">Programme & Project Support</a></li>
<li id="itsolution"><a href="it_solutions.php">Web & Digital Project Delivery</a></li>
</ul>
</div>
</div>
<div class="grid_6 alpha omega">
<div id="slide">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="378" height="248" id="FlashID" title="Myers Projects Introduction Movie">
<param name="movie" value="img/swf/test.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" />
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="img/swf/test.swf" width="378" height="248">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="/uk/en/Scripts/expressInstall.swf" />
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div class="grid_5">
<div id="options2">
<ul>
<li id="change" class="selected"><a href="enterprise_change_and_risk_management.php">Enterprise Change & Risk Management</a></li>
<li id="it""><a href="strategic_it_management.php">Strategic IT Management</a></li>
<li id="training"><a href="training_and_resource_provision.php">Training & Resource Provision</a></li>
</ul>
</div>
</div>
</div>
And the CSS
#options1 ul, #options2 ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
options1 li, #options2 ul {
margin: 0;
padding: 0;
text-indent: -9999px;
}
options1 a, #options2 a {
background-repeat:no-repeat;
display:block;
float:left;
height:82px;
width: 280px;
background-image:url("../img/template/tabs.png");
}
options1 #web a {
border-bottom: 1px solid white;
background-position: 0px 0px;
}
options1 li#web a:hover, #options1 li#web.active a {
background-position: 0px -249px;
}
options1 #project a {
border-bottom: 1px solid white;
background-position: 0px -83px;
}
options1 li#project a:hover, #options1 li#project.active a {
background-position: 0px -332px;
}
options1 #itsolution a {
background-position: 0px -166px;
}
options1 li#itsolution a:hover, #options1 li#itsolution.active a {
background-position: 0px -416px;
}
options2 #change a {
border-bottom: 1px solid white;
background-position: -281px 0px;
}
options2 li#change a:hover, #options1 li#change.active a {
background-position: -281px -249px;
}
options2 #it a {
border-bottom: 1px solid white;
background-position: -281px -83px;
}
options2 li#it a:hover, #options1 li#it.active a {
background-position: -281px -332px;
}
options2 #training a {
background-position: -281px -166px;
}
options2 li#training a:hover, #options1 li#training.active a {
background-position: -281px -416px;
}
slide {
height: 248px;
width: 378px;
background-color: #c2e2fa;
border-left: 1px solid white;
border-right: 1px solid white;
}
IE6 conditional CSS contents
#options1 a, #options2 a {
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
height: 82px;
clear: both;
display: inline;
}
slide {
display: inline;
border: 0px;
margin: 0px;
padding: 0px;
overflow: hidden;
float: left;
background-color: #c2e2fa;
}
slide {
\width: 328px;
w\idth: 328px;
}
options1, #options2, #options1 ul, #options2 ul {
overflow: hidden;
display: inline;
float: left;
}