Yes indeed. The web browser from Reymond, VA is very unforgiving. I came through this problem as I was redesigning my portfolio website. The page layout was perfectly fine if I rendered the page on Firefox and Chrome but it would not work on Internet explorer 9; the latest version.

When using IE9, the divs on my webpage could not be positioned to the center using the magical CSS expression – “margin: auto”. Of course, after pulling my hair out, I realized that IE9 couldn’t render the content correctly because I was missing the doctype tag in my HTML file. After doing some research, I found out that IE9 will render your document using outdated rules hence the wrong layout on your screen.  The doctype tag should be included at the very top of your file before declaring the HTML tag.

Check if your HTML has the following line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For an example of a complete implementation see code below;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My WEBSITE</title>

<style>
	#main{
		margin:auto;
		background-color:#CCFF66;
		height: 100px;
		width: 300px;
	}
</style>

</head>

<body>

<div id="main"> This is the floating div... </div>

</body>
</html>

As a side note, it is really important to constantly check your webpage design layout using Firefox, IE, Opera and Chrome at the same time. It really gets frustrating if you wait until the last minute to do so. Things can go really berserk!

Click here to comment