IE Explorer CSS Discrepancy Between IE6, IE7, IE8 & IE9

Question

No version of IE is displaying my css template the same. Does anyone know what the causes of the differences are?

Currently the site works perfectly in Chrome, Firefox and Safari so now comes IE testing (the bane of my life, and surprise surprise it's not working but it has be stumped).

Can anyone explain what is causing the problems? Things I have noticed: background missing in IE9, gaps around background in IE7, page simply not there IE6, margins wrong IE*

Dead link

---

Some browser shots: http://browsershots.org/http://beta.pegproductions.com/urlshortener/template.html

---

Update, after following advice IE7, 8 & 9 still have trouble displaying the background, does anyone know why?

Answer 1

"Does anyone know what the causes of the differences are?"

The cause is that MS is a gigantic corporation with an immense installed user base. MS also has tightly intertwined enterprise software offerings and has made IE a part of that tangled mess. As such, the incentive to release fully W3C compliant browser engines isn't there, and as IE isn't a direct money maker for them, that just compounds the issue.

"Can anyone explain what is causing the problems? "

Not in one answer. The bugs are immense and vary from version to version. IE9 is pretty close to being standard. IE8 is acceptable. IE7 is a pain and IE6 will just cause you to swear and throw things.

Fortunately, someone at MS knew this was an issue and managed to get conditional comments implemented in IE that lets you target specific content for specific versions of IE. A gigantic hack, for sure, but thankfully we at least have that. This is a good method that lots of people use:

http://www.positioniseverything.net/articles/cc-plus.html

Answer 2

You shouldn't really be using spans for your layout.

Use divs or at least set display: block; on your spans.

That should hopefully fix SOME of your issues, good luck with the rest.

Answer 3

You may have updated the code since Marko's answer because I don't see any spans. That said, you still have a ton of code to accomplish a pretty basic layout (box with rounded corners and a gradient).

You may want to simplify what you're doing by using a single <div> for your content, then using CSS rounded corners to cover most browsers, then, if you really want to make the look identical in IE, use one of the various methods to round corners for IE ( here's a good choice ).

This should also allow you to use the gradient background if you wish with less discrepancies between browsers. Here's a quick example without any background image.

Answer 4

Try not to reinvent the wheel, many people have gone through all the pain already getting certain designs, frameworks and widgets working cross-browser. Use or base your design on something tried and tested, complying to licensing of course. Is your design really that unique/good that it's worth the hassle of making from scratch?