Why does my site look like garbage in IE?

css, internet-explorer, xhtml

Solution

It's because it's rendering in quirks mode - IE doesn't like anything before the DOCTYPE. Remove the comment and it should render in standards mode (his live site contained a large comment before the DOCTYPE which isn't visible in the question).

From Wikipedia:

Quirks mode in any version of IE will also be triggered if anything but whitespace precedes the DOCTYPE. For example, if a hypertext document contains a comment or any tag before the DOCTYPE, IE will use quirks mode:

<!-- This comment will put IE 6, 7 and 8 in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Problem

``` <!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"> <head> <title>Davey Whitney</title> <link rel="shortcut icon" href="http://daveywhitney.com/images/favicon.ico" /> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"></script> <script src="js/jquery.jparallax.js" type="text/javascript"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <meta name="keywords" content="Davey Whitney,Davey,Whitney,Web Designer,Web Design,Web Development,Web" /> <meta name="description" content="Davey Whitney - Web Developer and so much more..." /> <link rel="stylesheet" href="style.css" type="text/css" media="all" /> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#parallax') .animate( {duration: '2000', easing: 'easeInSine' }) .jparallax({yparallax:false},{xtravel: '100%'},{xtravel: '300px'}); }); </script> </head> <body bgcolor="#ffffff"> <div id="wrapper"> <div id="icons"> <a href="mailto:davey@daveywhitney.com" target="_blank"> <img src="http://daveywhitney.com/images/gmail.png" border="0" /> </a> <a href="http://www.linkedin.com/pub/davey-whitney/15/a15/86a" target="_blank"> <img src="http://daveywhitney.com/images/linkedin.png" border="0" /> </a> <a href="http://twitter.com/daveywhitney" target="_blank"> <img src="http://daveywhitney.com/images/twitter.png" border="0" /> </a> <a href="http://www.facebook.com/home.php?#/profile.php?ref=profile&id=13810754" target="_blank"> <img src="http://daveywhitney.com/images/facebook.png" border="0" /> </a> </div> <div id="copyright"> © <a href="mailto:davey@daveywhitney.com" target="_blank">Davey Whitney</a> </div> <div id="parallax"> <img style="width: 61px;" src="http://daveywhitney.com/images/merun.png" alt="" /> </div> </div> <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-12009950-2"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html> ``` css ``` #wrapper { width:1200px; } #icons { padding:100px 0 0 0; margin:0 auto; width:530px; border:0; } #copyright { width:150px; margin:50px auto; } #copyright a:link { color: #3F7BCA; } #copyright a:hover { color: #F28900; } a { text-decoration:none; } #parallax { position:relative; overflow:hidden; width:100%; height:98px; border:none; margin:0 auto 20px auto; padding-top: 30px; } ``` Here is the site: http://daveywhitney.com/

Original source