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;
}