Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does my site look like garbage in IE?

<!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"><!--mce:0--></script>
<script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.jparallax.js" type="text/javascript"><!--mce:2--></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:[email protected]" 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">

&copy; <a href="mailto:[email protected]" 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/

like image 875
Davey Avatar asked Jan 11 '10 06:01

Davey


2 Answers

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">
like image 169
Brian McKenna Avatar answered Sep 28 '22 01:09

Brian McKenna


If you are talking about IE6, then it is because IE6 is an outdated browser that doesn't support many common html and css tools.

like image 29
zmbush Avatar answered Sep 28 '22 02:09

zmbush