Home of Doug Gibson, full life cycle ColdFusion web/application developer

CSS: Overcoming "background: transparent" In Internet Explorer

posted Mar 11, 2008 at 11:33:49 PM by Doug Gibson.

Following up on my previous blog about the bug I encountered when upgrading to Eric Meyer's latest reset.css v1.0, I thought I'd share some thoughts and a possible solution to the problem.

To backtrack a bit, reset.css is a special CSS file created solely for the purpose of eliminating browser default issues and cross-browser compatibility problems by explicitly setting the styles of elements to be the same in all browsers.

When applying the latest version of Eric Meyer's reset.css, all of my table row striping disappeared due to the introduction of background:transparent; into the main declaration.

Thanks to Eric's explanation, I now understand the issue to be a bug in Internet Explorer, affecting even version 7. He commented on the previous post:

What's happening is that in order to make it look like the 'tr' has a background, IE copies that value to the 'td' elements in the row. It's a visual sleight-of-hand to cover the fact that IE can't actually style 'tr' background. The reset changes the 'td's back to transparent.

The simple solution is to remove the offending background:transparent; from the main reset declaration.

But there is a simple enough CSS solution as well, requiring just a few more declarations or more selectors to the existing declarations. Using the descendant selector, I can keep the reset.css as-is and keep the exact same classes on my 'tr's in tact and make the CSS work even in Internet Explorer with some additional rules.

Here's a sample of my old CSS that was affected:

  1. tr.inactiverecord{background-color:#FF0}
  2. .greybar,.graybar{background-color:#DDD}
  3. thead+tbody tr:hover{background-color:#CCD}

To make this work in Internet Explorer, the following additional declarations would have to be added:

  1. tr.inactiverecord td{background-color:#FF0}
  2. .greybar td,.graybar td{background-color:#DDD}
  3. thead+tbody tr:hover td{background-color:#CCD}

Of course these declarations could be merged with the previous ones since the styling is the same for all of them. However, I listed them separately for clarity.

I also tried to put these new declarations in my iehacks.css, but apparently I was under the assumption that only IE 6 and older needed hacks, because that's what I've filtered for in my conditional comments, meaning thes styles would not be applied to IE7, which remains broken.

  1. <!--[if lt IE 7]>
  2. <link rel="Stylesheet" type="text/css" href="/styles/default/iehacks.css?v=2.0.4" media="screen,projection" />
  3. <![endif]-->

So I'm left pondering the same thing Eric stated in his previous comment:

So now I have to decide: take it out or leave it in? If I leave it in, do I document that quirk in a comment or not?

I understand the intention of the reset.css, and partially agree with leaving it "pure" - i.e. not changing it for the sake of accommodating Internet Explorer's flakiness (I would still document it though). On the other hand, I still don't know of any practical bugs with other browsers and background inheritance that would necessitate such a declaration.

For now, I've decided to keep the declaration since the workaround is fairly simple and the IE bug is limited to table rows.


0 Reader Comments

To minimize comment spam/abuse, comments are closed on articles over a month old.