tags:

views:

249

answers:

3
+5  Q: 

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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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&amp;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/

+1  A: 

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.

zipcodeman  2010-01-11 06:12:22
IE7. Should I just not even care about people using IE?
Davey  2010-01-11 06:14:35
If your analytics are similar to mine, you probably get about as much traffic from IE as you do from FF.
John at CashCommons  2010-01-11 06:17:52
@Davey: That's a question you need to ask yourself. "Who is my audience". "Am I losing business (or whatever) but ignoring users who use (possible not by choice) IE".
David  2010-01-11 06:17:58
You should care about IE users. they make up the majority of internet users. IE 7 and 8 are "modern" browsers. IE 6 should be discontinued.
Kyle Trauberman  2010-01-11 06:18:53
In my experience, getting a site to work in IE is a major headache, but I guess it maximizes your audience.
zipcodeman  2010-01-11 06:19:23
Got it to work in IE but this is an incredibly simple site, why must we be tormented like this?
Davey  2010-01-11 06:28:37
The boys up in Redmond are rather sadistic. I would recommend using the W3C standards validator if your site ever starts acting weird again: http://validator.w3.org/
zipcodeman  2010-01-11 06:30:17
Word up, thanks for the advice.
Davey  2010-01-11 06:33:50
@Kyle,IE7/8 are NOT modern browsers. Modern browsers can do better than DOM Level 1. They can handle XHTML served as XHTML as well as SVG, MathML, the current javascript standard. Modern browsers move forward with new implementations like canvas, video and audio. Modern browsers don't have tens of web sites dedicated to fixing them alone and don't have developers crying for them to support the standard. People complain about IE9s shortcomings and it's not even out yet. Modern browser vendors don't join standards committees (SVG) 10 years late.No version of IE is a "modern browser".
Rob  2010-01-11 06:42:57
+1  A: 

Because IE is obviously garbage...IE6 at least, IE8 is pretty good. Make sure you aren't using any CSS3 features, Opera is the only one that supports most of that. Also, validate your page, if you fix the issues it finds, most of your problems will probably be resolved.

jdc0589  2010-01-11 06:16:26
Thanks for the advice.
Davey  2010-01-11 06:18:11
+13  A: 

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"&gt;
Brian McKenna  2010-01-11 06:17:00
Wow, I removed the comment from my index page and it looks perfect. I had no idea that could possibly be a problem.
Davey  2010-01-11 06:24:01
nice work around.......
Ankit Sachan  2010-01-11 06:29:07
Also, I put the comment after the doctype and everything was still fine. I can still have my obnoxious ascii art if I want. Hooray!
Davey  2010-01-11 06:29:31
Just a thought: Will whitespace count as anything before the doctype declaration?
alex  2010-03-19 05:47:49
@alex: Nope, whitespace is fine - but *only* whitespace.
Brian McKenna  2010-03-19 05:56:32

related questions

IE7 HTML/CSS margin-bottom bug.
IE7: header above menu
How to create an all browser-compatible hanging indent style in CSS in a span
How can you customize the numbers in an ordered list?
style.display not working in Firefox, Opera, Safari - IE7 OK
Best WYSIWYG CSS editor?
How important is W3C XHTML/CSS validation when finalizing work?
Solve the IE select overlap bug
IE8 overflow:auto with max-height
Autosizing Textarea
What is the best way to create rounded corners using CSS?
FF3 WinXP != FF3 Ubuntu - why?
Is there a business reason for striving for pure CSS layout?
How to set up a CSS switcher in ASP.NET
Setting a div's height in HTML with CSS
Wrapping lists into columns
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
What sites offer free, quality web site design templates?
Can you recommend a good CSS online resource or book?
Html CSS Editor
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?