transparency for table cell div

Question

My markup is below. The background property of the #template element is set to rgba, with some transparency. In IE9 the transparency does not seem to work. If I remove the display: table-cell from #template style then transparency works but the cell is not 100% high anymore. This is only in IE. It works in Chrome. Did not try with FF.

I am looking for help figuring out why this is happening and how to fix it.

I know that if I remove the display: table-... styles, it works, but I need these styles for my layout. Except for the display: table-cell for #template, which I did not have originally, but discovered that without it, IE9 does not make it 100% high. I need it to be 100% high.

http://jsfiddle.net/d6nUN/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body {
        height: 100%;
      }
      #container {
        display: table;
        height: 100%;
        width: 100%;
      }
      #container #content {
        background-color: #ff6622;
        display: table-row;
        height: 100%;
      }
      #template {
        background: rgba(255, 255, 255, 0.3);
        display: table-cell;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <div id="template">text</div>
      </div>
    </div>
  </body>
</html>

score 0 · Answer 1 · answered Apr 11 '13 at 14:24

0

Try to stretch #template this way:

#template {
    ...
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

http://jsfiddle.net/pfUe7/2/

answered Apr 11 '13 at 14:24

dfsq

191,768
25
236
258

yes, it works thank you. I cannot use absolute positioning, these elements are a part of a bigger layout, the sample that I have posted is contrived. `#template` needs to be positioned inside a table row. – akonsu Apr 11 '13 at 14:26
So what is the problem? you just set `position: relative` for the parent container. – dfsq Apr 11 '13 at 14:28
here is the live page that I am trying to fix: http://kamyanov-art.com/#/contact In Chrome, the background picture is covered with white tint, in IE9 only the part of it is covered. This happens because `#template` does not have `table-cell` property, but if I add it, the alpha disappears. – akonsu Apr 11 '13 at 14:32
Works fine for me in IE9. `#template {position: absolute; top: 148px; bottom: 0; left: 0; right: 0;}` (+ remove `height: 100%`). `#content {position: relative}`. 148px is the height of the header. – dfsq Apr 11 '13 at 14:41
the live site also has a footer which must be at the bottom of the contents, or at the bottom of the window, whatever is bigger. absolute positioning breaks that at least. looks like i will need to have conditional CSS for IE specifically... – akonsu Apr 11 '13 at 14:53
Conditional CSS for IE is okay if that is what it takes. – Marc Audet Apr 11 '13 at 15:55

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

I did some research and saw the following:

rgba background with IE filter alternative: IE9 renders both!

Try the following declaration in your #template rule set:

  filter: progid:DXImageTransform.Microsoft.alpha(30);

You may have to make this CSS rule specific to IE9 but at least you can use table-cell.

Reference: http://msdn.microsoft.com/en-us/library/ms532910%28v=vs.85%29.aspx

edited May 23 '17 at 12:18

Community

1
1

answered Apr 11 '13 at 14:29

Marc Audet

46,011
11
63
83

transparency for table cell div

2 Answers2