2

I'm working on a table that has cells requiring a background with lowered opacity, and text on top not effected by the background. The content in the cells is dynamic.

http://jsfiddle.net/6zszm/3/

In IE9 (have not tested in other IE versions) the background is clipped at the span content. In firefox, the background runs wild and overflows to bottom right. In chrome this works like a charm.

Some similar questions that didn't quite cover it: How to make <div> fill <td> height Someone suggests a 1px height to the td - this did not work for me, nothing changed. I would also rather not use JS to fix this problem.

Another somewhat related issue: CSS absolute positioning bug with IE9 The strange thing is in IE9, this worked in compatibility mode, but not without.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Alex
  • 23
  • 2
  • What kind of browser compatibility do you need? IE8? IE7? – Per Salbark Jun 29 '12 at 12:38
  • In theory, all of the above _and_ IE6, but I haven't had a chance to test them yet. – Alex Jun 29 '12 at 16:00
  • I can probably work out a solution that would mean IE6 users get a intermittent flashing pink background on every cell... would that be of help? ;) .. basically if you are having to support that far back you can only use PNG transparent images (with a PNGFix hack aswell of course). – Pebbl Jun 29 '12 at 16:09

2 Answers2

1

This is indeed seemingly impossible - unless you specifically define each cell's width and height, which kind of defeats the object of using a table.

Possbile solutions...

RGBA

Assuming you are going to use background colours you can always use background-color: rgba(200,200,200,0.5) with a fallback to solid colours if it fails. Support for RGBA is in all of the top browsers, it doesn't work for IE8 and below however...

Transparent PNGs

The obvious easy one is to fallback to using transparent PNGs, but then this relies on the colours you are using being predefined and rather rigid.

Use -moz-element

Another mad solution to get FireFox to work (if you are using background images rather than colours) would be to use the background: moz-element() ability. Here you create hidden elements on your page of each different opacity that you might require and reference them as a background via id. For example:

<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>

Then reference that on the element you want the background to appear on:

<td style="background: -moz-element(#image1);"></td>

I'm not vouching for this method however, it's rather inelegant and browser specific. Tbh I'm quite suprised to find that this problem is indeed not fixable (esp. in FF) using plain old absolute and relative tricks.

Don't us Tables

The more browser supported solution by far would be to drop using tables and recreate a table structure using good old divs and floats. The only problem with this solution is again you'd have to define most widths and heights and you wouldn't be able to achieve vertical cell alignments unless you fallback to something even more experimental like FlexBox.

Pebbl
  • 34,937
  • 6
  • 62
  • 64
  • Seems like PNGs are going to be the way to go on this one, but I seriously appreciate all of the options. Insanely informative, thank you! – Alex Jun 30 '12 at 00:22
  • @Alex heh, no worries... I guess I was a bit taken aback that this wasn't straight forward to solve. The way FireFox behaves when placing an absolutely positioned element inside a relatively positioned TD is very odd indeed, not expected at all... – Pebbl Jun 30 '12 at 14:37
0

You could try working with a CSS framework, like LESS or Blueprint. Most frameworks have background code that makes your styling look the same in all browsers, even if tweaking would normally be required.

StoicJester
  • 364
  • 2
  • 12
  • Do you have an example? I know LESS has CSS variables and Blueprint helps you jump past a palette of basic tasks, but I've not seen this support in either. – Chris Moschini Jun 29 '12 at 16:02
  • @Chris The most prominent one that I can think of is rounded corners. Usually, that is a good number of lines of code if you actually want it to work in all browsers, since some of them require you to use your own images and others don't. The LESS function for rounded edges determines which browser is being used for you and sets the right styling commands. I have read through some of the LESS code, and many of the functions that I read start with switch statements to determine which browser is being used and certain conditions to apply to the styling in each case. – StoicJester Jun 29 '12 at 16:51