IE8 CSS Shadow not displaying correctly on a parent div

Here is my site: http://uwf.edu/honors/thesis_submission/

In firefox, everything is absolutely great. However, in IE8 the shadow does not surround the bottom footer div inside my container.

<div class = "container">
    ...
    <div style = "clear:both"></div>
    <div class = "..." 开发者_Python百科id = "footer">
    </div>

</div>

Any ideas as to why this is happening?

IE8 doesn't natively support the box-shadow CSS property.

I note that you're using a filter style to achieve the same effect.

Firstly, for IE8 you should use -ms-filter instead of just filter, and also enclose the filter value in quotes, like so:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#cccccc', Direction= 135, Strength=5)";

You will need to also keep your existing filter style if you want to support IE6 and IE7.

Secondly, I would strongly suggest using a product like CSS3Pie in order to add support for the standard CSS box-shadow to IE. This will drastically simplify your stylesheets and make them easier to maintain.

Your HTML is messed.

it should be <div style = "clear:both"></div>