I'd been designing my website using Firefox 3.up & IE 8 as a reference. I recently happened to see it on IE 7, it looks hideous :[. I thought strict mode was supposed to solve all compatibility issues. I would tweak it for IE 7 but its going to be a hell lot of work. What do you guys suggest? Should i tweak it for IE 7 or is there another solution to solve the compatibility problems? And how do i avoid such problems in the future? (don't say no one's going to be using IE in the future, but i hope that's true).
The Doctype definition-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 Answers 4
I thought strict mode was supposed to solve all compatibility issues.
No, just lots of them.
Should i tweak it for IE 7 or is there another solution to solve the compatibility problems?
Yes.
And how do i avoid such problems in the future
Fix them as you go along. Don't leave IE7 testing until the end.
Comments
when you develop you should use something like IETester from the start. Every time you make a handful of significant adjustments to the site, you should take a few minutes and test it in all the browsers you are supporting. IETester will let you test IE 5.5-9 in one or two clicks.
Comments
There is no magic bullet for IE compatibility. It's the bane of every web developer, and there is no answer to it. You need to be aware of which things work in IE and which don't and try to avoid using the latter, or have a backup plan ready on how to deal with the problems. With carefully crafted CSS you can usually get to 95+% cross-browser compatibility, which leaves you only with a few quirks you'll need to deal with (using IE specific workarounds, graceful degradation etc.). This does take some experience though; until then, test frequently across all browsers!
Welcome to the world of web development. :o)
Comments
For layout, CSS would normally do the trick. Use a specific CSS for IE versions that looks hideous using CSS conditional statements: e.g.
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
See this article for more information. Do not, I repeat, do NOT assume that browsers adhere to all html standards (esp IE). It is a good practice to always test your website using different OS, Browsers and browser versions.