Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs
Contact   •   Articles   •   Products   •   Support   •   Search
Ad-free experience sponsored by:
ASPOSE - the market leader of .NET and Java APIs for file formats – natively work with DOCX, XLSX, PPT, PDF, images and more

IE9 not rendering box-shadow Elements inside of Table Cells


:P
On this page:

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:

ChromeAndIe

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

Posted in HTML  Internet Explorer  

The Voices of Reason


 

Kyle
January 03, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

Another reason to not use tables for layouts as well.

Rick Strahl
January 03, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

@Kyle - yup. Mainly old sites that do this for me. But doing re-sizable layouts without tables is still pretty darn challenging and often way easier with tables. Easier with fixed layouts and grid CSS styling, but that doesn't work well for resizable pages.

David
January 04, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

Would it not make more sense to add border-collapse:separate to the boxshadow class?
http://jsfiddle.net/NZfJ9/

Rick Strahl
January 04, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

@David - Yes it would! :-) Didn't realize that would work, but seems real obvious now... Updated the post to reflect since this is clearly the easiest and most re-usable solution!

Sharky
January 27, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

Have you tried the code without using tables?

Rick Strahl
January 27, 2012

# re: IE9 not rendering box-shadow Elements inside of Table Cells

@Sharky - of course. It works if it's not inside of tables. As others pointed out you can apply the border-collapse style to any control that sits above the image (or other control) that requires the box shadow.

West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2020