Internet Explorer is a pain in the side of web designers everywhere. The reason parts of your home page dont work is because of an unfixed double margin bug. This only affects Internet Explorer 6.0, not IE7. The reason it looks good on some, and not on others is the different versions of IE. I am having similar problems with our website. They are not difficult to solve, but the are very time consuming. The reason that most of your content boxes are changing place is that their margins are larger than the defined area. This is caused by an unfixed Internet Explorer 6.0 bug, where a floated object will double its margins. There is a very easy workaround for this, however. Due to
another unfixed IE 6.0 bug, we can make a style that only IE6 will read. That is the * html style. For example, say we have a style here:
Code:
#content {
float:left;
margin-right:20px;
}
In any browser but IE6, it will display correctly, but in IE there will be 20 pixels of right margin, instead of 15. This can be solved by adding an identical style directly below that one, with the prefix * html. Only IE will read this style.
Code:
#content {
float:left;
margin-right:20px;
}
* html #content {
margin-right:10px;
}
With this, it should display properly. Be sure to remember that the IE6 Style must remain under the regular style in the stylesheet.
I hope this is useful.
-Eric, Team 159