If you found this post then Microsoft Internet Explorer 8 has probably broken your website. All that nice CSS work has been ruined.

A solution is to force IE8 to run in compatability mode of IE7.

<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />

Ok… so you setup a page with a blue background and float an object left, for example. You now see that the background colour on the float is white! Ruining the look of your page.

<div id=”contentBody”>
<div style=”float: left;”>Floated Content</div>
</div>

So how do we do it? Use the following hack:

#contentBody:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } * html #contentBody { height: 1%;}

As with the HTML, I have created a CSS template which may be of use. The idea is to clear everything back to default across all browsers by removing padding, margins and setting the fonts up properly.

* { margin:0; padding:0; }
body { font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; font-size: 100%; }
.access { display: none; }
.clear { clear: both; }
a { color: #000; }

/** Structure **/
#container { width: 790px; margin: 0 auto; }