How do i make my page compatible with IE?

Question

Am building a website using Django, my templates make use of CSS and am testing it locally using firefox, but when i was just about to "show it of" to my buddies i run it against IE and the darn web site is all broken! the headers are all messed up nothing seems to hold together, the spaces are all messed up! its bad.

Is there something am missing! like some header declaration? DOCTYPE or something?

NB: I grabbed the css am using from some site in the internet, and when i run that site on IE it all looks good!

Help

This is the offending css, the h1 section that is using this css is the one that is breaking, any clues?

div#header
{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  text-align: left;
  width: 780px;
  height: 102px;
  background: url(/site_media/header_background.gif) no-repeat top left;
}


div#header h1
{
  padding: 30px;
  font-family: Verdana, sans-serif;
  font-size: 17px;
  font-weight: bold;
  color: #c8c8c8;
  letter-spacing: -1px;
}

div#header h1 strong
{
  color: #999;
  width: 810px;
}

Answer 1

This won't help you this time, but next time you develop a site "from scratch", try testing the site in IE at least once every day. That way you will not get this kind of surprise at the end.

If you want a more precice answer, post the URL and someone will point out why it looks different in IE and Firefox

Answer 2

You're not missing anything. Welcome to IE...

Most of the problems are likely to be caused by bugs in IE's rendering engine. These links might help:

• IE's Top 10 CSS Problems
• IE Box Model Bug
• Position is Everything - Modern browser bugs explained in detail

You can include an alternate version of your stylesheet for IE using conditional comments in your HTML.

Steve

Answer 3

This is my PHP function I use to determine the appropriate stylesheet:

    function stylesheet() {
 $ua    = $_SERVER["HTTP_USER_AGENT"];
 $iepos = strpos($ua,"MSIE");
 if ($iepos) {
  $vers = substr($ua,$iepos+5,1);
  if ($vers >= 8) return "style.css";
  else return "iestyle.css";
  }
 else return "style.css";
 }

I was having a really odd problem where I needed IE8 to be the "good" version, so most people can probably change...

if ($vers >= 8)

to...

if ($vers >= 7)

Then I just have, in place of a normal CSS link:

<?php echo "<link rel=\"stylesheet\" href=\"".stylesheet()."\" />"; ?>

Good luck.

Answer 4

First, make sure you're using a document type declaration that does not trigger Quirks Mode. I suggest HTML 4.01 Strict, or XHTML 1.0 Strict.

Second, make sure your site validates according to the W3C validator.

Finally, post the site in question, or a snippet of what is wrong, so we can advise you further. You may need conditional CSS specifically for (versions of) IE.

EDIT: Now seeing your update, could you post a screenshot of what you consider 'broken' and can you make sure the page is NOT using that transitional doctype and that it validates. The accompanying HTML would be helpful as well.

Answer 5

Try to use reset.css file for more "happy" cross browsing. You can see a detailed information about reset.css from Eric Meyer's site. Also there is another reset.css file which has developed by one of the developers of yahoo. But result is same for both reset.css. You can try any of them.

Answer 6

and then once you've got your website happy on IE7, you'll probably need to confront all the additional problems that IE6 will still have with it. IE6 still runs on about 15% of PCs so you'll have to decide what you wanna do about that...

Oh and don't forget your Safari, Chrome, and FF2 testing. :)

Answer 7

For the doctype, the primary purpose is to get the browser out of quirksmode.

You can use theirs

<!DOCTYPE XHTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

or even just

<!doctype>

Which is the HTML5 doctype, and is simpler :) [Though it will give different errors if you use the w3c validator to check your code.]

What is most definitely messing you up is the padding:

div#header h1 { padding: 30px; ...

IE has a, er, different box model than the other browsers and the first thing to show it are the borders and paddings. (In IE the width includes the padding, in other browsers it doesn't)

To solve this you can use IE conditions or hacks to give IE its own styles, or you can use nested divs to and margins, which are treated more consistently. You can also use Dean Edwards IE7 or similar to fix it using Javascript.