Ran into an annoying problem today with IE 9. Slowly updating some older sites with CSS 3 tags and for
the most part IE9 does a reasonably decent job of working with
the new CSS 3 features. Not all by a long shot but at least some of
the more useful ones like border-radius and box-shadow are supported. Until today I was happy to see that IE supported box-shadow just fine, but I ran into a problem with some old markup that uses tables for its main layout sections. I found that
inside of a table cell IE fails to render a box-shadow. Below are images from Chrome (left) and IE 9 (right) of
the same content:
The download and purchase images are rendered with: <a href="download.asp" style="display:block;margin: 10px;"><img src="../images/download.gif" class="boxshadow roundbox" /></a>
where
the .boxshadow and .roundbox styles look like this:.boxshadow
{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.roundbox
{
-moz-border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px;
border-radius: 6px 6px 6px 6px;
}
And
the Problem is… collapsed Table Borders
Now normally these two styles work just fine in IE 9 when applied to elements. But
the box-shadow doesn't work
inside of this markup - because
the parent container is a table cell.<td class="sidebar" style="border-collapse: collapse"> … <a href="download.asp" style="display:block;margin: 10px;"><img src="../images/download.gif" class="boxshadow roundbox" /></a> …</td>
This HTML causes
the image to not show a shadow. In actuality I'm not styling inline, but as part of my browser Reset I have
the following in my master .css file:table {
border-collapse: collapse;
border-spacing: 0;
}
which has
the same effect as
the inline style. border-collapse by default inherits from
the parent and so
the TD inherits from table and tr - so TD tags are effectively collapsed.
You can check out a test document that demonstrates this behavior here in this CodePaste.net snippet or run it here.
How to work around this Issue
To get IE9 to render
the shadows
inside of
the TD tag correctly, I can just change
the style explicitly NOT to use border-collapse:<td class="sidebar" style="border-collapse: separate; border-width: 0;">
Or better yet (thanks to David's comment below), you can add
the border-collapse: separate to
the .boxshadow style like this:.boxshadow
{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
border-collapse: separate;
}
With either of these approaches IE renders
the shadows correctly.
Do you really need border-collapse?
Should you bother with border-collapse? I think so! Collapsed borders render flat as a single fat line if a border-width and border-color are assigned, while separated borders render a thin line with a bunch of weird white space around it or worse render a old skool 3D raised border which is terribly ugly as well. So as a matter of course in any app my browser Reset includes
the above code to make sure all tables with borders render
the same flat borders.
As you probably know, IE has all sorts of rendering issues in tables and on backgrounds (opacity backgrounds or image backgrounds) most of which is caused by
the way that IE internally uses ActiveX filters to apply these effects. Apparently collapsed borders are yet one more item that causes problems with rendering.
There you have it. Another crappy failure in IE we have to check for now, just one more reason to hate Internet Explorer. Luckily this one has a reasonably easy workaround. I hope this helps out somebody and saves them
the hour I spent trying to figure out what caused this problem in
the first place.
Resources
Sample HTML document that demonstrates
the behavior
Run
the Sample© Rick Strahl, West Wind Technologies, 2005-2012Posted in HTML Internet Explorer
Tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
