IE7 expression not equal to table-cell height

Question

I'm vertically centering multi-lined text with my code. It works in all modern browsers, but not in IE7. I searched around and found me a CSS expression on CSS-Tricks that should fix it.

Unfortunately the height of the element in IE7 is not 107px, it appears to be bigger. I just found out about CSS expressions and have little knowledge about it.

Could anybody indicate the problem and solution?

CSS

p.caption {
    display: table-cell; 
    height: 107px;
    padding: 15px 10px;
    border-bottom: 1px solid #cecece;
    font-size: 16px;
    text-shadow: 0 0 1px #868686;
    text-align: center;  
    vertical-align: middle;
}

IE7 CSS

p.caption {
    clear: expression(
        style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
        style.clear = "none", 0
    );
}

Live example: JSFiddle

I don't think JSFiddle supports IE expressions?

Answer 1

You need to add height: 107px; to 'div' but not 'p'

div#fullWidth{
  display: table;
  width: 200px;
  background: #dddddd;
  height: 107px;
}

p.caption{
  display: table-cell;
  padding: 15px 10px;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
}

Answer 2

display: table-cell is not supported on IE7. So vertical-align is not applied. See there:

http://quirksmode.org/css/css2/display.html

http://www.kamui.co.uk/2012/01/23/css-display-table-cell-table-row-table-in-ie7/

This bypass seems to work (tested on IE7/8 & FF25):

CSS:

div#fullWidth {
    display: table;
    width: 200px;
    background: #dddddd;
    height: 107px;
}

p.caption {
    display: table-cell; 
    border-bottom: 1px solid #cecece;
    font-size: 16px;
    text-shadow: 0 0 1px #868686;
    text-align: center;  
    vertical-align: middle;
    _margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0":(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}

HTML:

<div id="fullWidth">
    <p class="caption">Testing 1,2,4,5,6,7,8,9,10 1,2,4,5,6,7,8,9,10</p>
</div>

The "_" in the CSS is another bypass taken into account only by IE (not sure for IE9 & 10). FF, Chrome and Opera will ignore it.

Be careful on height: it is defined on parent element size. As always on IE, an element size is applied if all its parents height (or width) are set.

_height: 100%;
_width: 100%;

can be useful.