Today I would like to show you a very common cause for browser differences. As we all know IE has a somewhat bad reputation. Now if you would ask someone what is so bad about it, they probably only say it sucks because they haven't got an idea.
One of the most common problems is the coder itself when creating a html page. They are quite often omitting something vital resulting in a question on help fora similar to the following (blaming IE).
Hi all, my page works great in Firefox and Chrome, but as always IE screws up, please help.
What is missing 5 out of 10 is a valid doctype. Although quite some modern browsers like firefox and chrome will forgive you, IE doesn't. And to be honest why would it? If you code badly you should face the consequences.
Now what happens if you omit this oh so vital doctype. It makes any version of IE to interpret you page as if it were IE 5. Isn't that great! :-) This is easy to spot when Firefox and Chrome nicely center the page with: margin:0 auto; But in IE it's not centered at all and starts at the left. This is because IE 5 (and any version of IE without a doctype) needs text-align:center; on the body.
Now IE 5 has loads of bugs, and only a few people are left that know how to work with it, since most clients don't want to spend money to make the website available for IE 5. So if you don't like debugging and reading in to it. Just include a doctype and your done.
Depending on your coding style you need to choose a valid doctype. Now I recommend the strict types.
Typical usage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>
...
</body>
</html>So that solved 5 out of 10 cases, hope this helped you too!
Wish you happy coding, and as always feel free to leave a comment or a request on an article.
Cssfreakie
No comments:
Post a Comment