Site not showing correctly in IE. Need help please

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>

Hi lukeowen. Welcome to SitePoint. :slight_smile:

Can anybody see anything in the code which could cause this?

The most obvious thing (assuming this is your full code) is that you are missing a doctype declaration at the top. Try replacing the <html> tag at the top of your page with this:


<!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" lang="en" xml:lang="en">

Does that help?

Thanks for picking up on that, I am pretty new to this and didn’t realise I needed that code. However it doesn’t solve the problem. I have attached what is showing when opened in Chrome (how I want it to look) and what it looks like in IE9. Thanks for your help.

Your problems are manyfold – the lack of a doctype is just the tip of a very large iceberg here. I see you’re using iWeb, which much like DW and Frontpage amount to… well, the only thing you can learn from it is how NOT to build a website. Here are just a few of the issues I’m seeing.

Inlined CSS – If I had my way the STYLE tag would be deprecated; it’s usually easier to keep style in an external file anyways even during development (since you can then have the HTML and CSS side-by-side) and it’s just not a good habit to get into.


    <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> 

Any tool tells you to use that much javascript, kick it right square in the nerts and go find some other tool.


function MM_swapImgRestore() { //v3.0

Ah, so many nubes fall for this DECADE OUT OF DATE script, I can’t believe any modern site building tool still promotes the use of this, but like de cockroaches this sucker is so blasted pervasive. Basically this amounts to using javascript to do CSS’ job. Probably not your fault you are using it, so much as you are using the wrong tool or got bad advice.


  <body style="background: #FFFFFF; margin: 0pt;> 
   
    <body class="home">

You cannot have two body tags, it’s missing the closing quote on the first one, and what that first one is doing has ZERO business in the markup… the class on the second one probably is also unnecessary/pointless.


<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>

style like that has no business in the markup, that’s likely TEN TIMES the amount of code that should be used for… whatever that is… (probably the primary heading), tags like FONT have no business in HTML written any time after 1998, and I suspect that image tag has no business in there either, though I’d have to see the page rendering live to weigh in on that.

… and that’s without even getting past the menu. I suspect your choice of tools is a large chunk of what’s messing with you – I would suggest sitting down with a flat text editor, and learning semantic HTML… THEN bending that HTML to your will with CSS. Right now whatever source you are learning from is a decade out of date or MORE – and if you’re worried about it working in IE you are so far out of the ballpark it’s not funny.

That may seem harsh, but that’s the fact Jack.