IE7 expression not equal to table-cell height

Viewed 415

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?

2 Answers
Related