Hi All
I have designed the following site which works fine in Chrome but the layout is completely wrong in IE. Can anybody see anything in the code which could cause this?
Thanks in advance,
Luke
<html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="iWeb 3.0.3" />
<meta name="iWeb-Build" content="local-build-20110324" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=1200" />
<title>Barloo Stud Gnowangerup</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style type="text/css">
/*<![CDATA[*/
/*]]>*/
.style1 {
font-size: 9px
}
.style2 {font-size: 10px}
.style4 {color: #818181}
a {text-decoration:none}
/* NAVIGATION
-----------------------------------------------------------------------------*/
ul.nav {
height: 17px;
overflow: visible;
position: absolute;
top: 184px;
left: 350;
width: 600px;
z-index: 2;
}
ul.nav li { display: block; float: left; }
ul.nav li a,
ul.nav li a:visited { color: #000; display: block; font-size: 17px; font-weight: bold; line-height: 17px; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; }
ul.nav li a:hover {
color: #999;
}
ul.nav li a.active { color: #000; }
/*widths*/
ul.nav li.home { width: 59px; }
ul.nav li.about { width: 84px; }
ul.nav li.history { width: 80px; }
ul.nav li.sales { width: 85px; }
ul.nav li.news { width: 70px; }
ul.nav li.gallery { width: 92px; }
ul.nav li.contact { width: 92px; }
/*span*/
ul.nav li.home a span { background-position: 0 0; }
ul.nav li.profile a span { background-position: -49px 0; }
ul.nav li.design a span { background-position: -123px 0; }
ul.nav li.awards a span { background-position: -193px 0; }
ul.nav li.news a span { background-position: -268px 0; }
ul.nav li.contact a span { background-position: -328px 0; }
/*hover*/
ul.nav li.home a:hover span { background-position: 0 -34px; }
ul.nav li.profile a:hover span { background-position: -49px -34px; }
ul.nav li.design a:hover span { background-position: -123px -34px; }
ul.nav li.awards a:hover span { background-position: -193px -34px; }
ul.nav li.news a:hover span { background-position: -268px -34px; }
ul.nav li.contact a:hover span { background-position: -328px -34px; }
/*active*/
ul.nav li.home a.active span { background-position: 0 -17px; }
ul.nav li.profile a.active span { background-position: -49px -17px; }
ul.nav li.design a.active span { background-position: -123px -17px; }
ul.nav li.awards a.active span { background-position: -193px -17px; }
ul.nav li.news a.active span { background-position: -268px -17px; }
ul.nav li.contact a.active span { background-position: -328px -17px; }
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="main_files/Main.js"></script>
<!--head_code_set--><!--/head_code_set--><meta name="Description" content="Luke Owen is a photographer who lives in Perth, Australia and shoots editorial, commercial and assignment photography." /><meta name="Keywords" content="perth, australia, western australia, photography, photograph, photo, photojournalist, editorial, news, sports, people, places, life, lukw, lukr, fotograaf, fotografie, Demotix, YouTube, Flickr," /><meta http-equiv="content-language" content="EN" /><meta name="robots" content="follow,index" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body style="background: #FFFFFF; margin: 0pt;>
<body class="home">
<div class="layout">
<div style="text-align: center; ">
<div class="style4" id="body_content" style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 950px; ">
<div style="float: left; margin-left: 0px; position: relative; width: 950px; z-index: 0; background-image: url(Main_files/DSC_0360.jpg); layer-background-image: url(Main_files/DSC_0360.jpg); border: 1px none #000000; overflow: hidden; position: relative; id="nav_layer">
<div style="height: 220px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 950px; z-index: 10; border-bottom: 2px solid #222; top: 0px" id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 1024px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper">
<div class="tinyText" style="height: 43px; left: 0px; position: absolute; top: 20px; width: 499px; z-index: 2;"><span class="html_region_widget"><span class="bumper" style="height: 0px; line-height: 0px; "><a href="Main.html"><img src="Main_files/barloo_lethead2.png" alt="title" name="Image1" width="400" height="170" border="0" id="Image1" /></a><br><font size="1" color="#000000">All Rights Reserved Barloo Stud 2011.<P><a href="www.lukeowenphotography.com">Created and maintained by Luke Owen</a></font></span></span></div>
<div class="header">
<ul class="nav">
<li class="home"><a href="Main.html" title="Barloo Stud / Home"><font face="Century Gothic">Home<span></span></a></li>
<li class="about"><a href="About.html" title="Barloo Stud / About">About<span></span></a></li>
<li class="history"><a href="History.html" title="Barloo Stud / History">History<span></span></a></li>
<li class="sales"><a href="Sales.html" title="Barloo Stud / Sales">Sales<span></span></a></li>
<li class="gallery"><a href="Gallery.html" title="Barloo Stud / Gallery">Gallery<span></span></a></li>
<li class="news"><a href="News.html" title="Barloo Stud / News">News<span></span></a></li>
<li class="contact"><a href="Contact.html" title="Barloo Stud / Contact">Contact</font><span></span></a></li>
</ul>
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 500px; left: 50px; opacity: 1.00; position: absolute; top: 250px; width: 800px; z-index: 1; ">
<script type="text/javascript"><!--//--><![CDATA[//><!--
var widget0_htmlMarkupURL = "Main_files/widget0_markup.html";
//--><!]]></script>
<div id="widget0-htmlRegion" class="html_region_widget"></div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
<div id="id2" style="height: 23px; left: 100px; position: absolute; top: 699px; width: 356px; z-index: 2;" class="style_SkipStroke shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_356_23" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
</div>
</div>
</div>
<div id="id3" style="height: 23px; left: 21px; position: absolute; top: 819px; width: 135px; z-index: 2;" class="style_SkipStroke shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_135_23" style="padding: 0px; ">
<div class="tinyText" style="height: 43px; left: 0px; position: absolute; top: 50px; width: 950px; z-index: 2;"><span class="html_region_widget"><span class="bumper" style="height: 0px; line-height: 0px; "><img src="Main_files/Bottom Title.jpg" alt="title" name="Image1" width="900" height="50" border="0" id="Image1" /></a></span></span></div>
</div>
</div>
<div style="height: 940px; line-height: 730px; " class="spacer"> </div>
</div>
<div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 950px; z-index: 0; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
<!--code_set--><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-10421527-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>