Kid Diamond Kid Diamond - 2 months ago 10
Javascript Question

IE7 expression not equal to table-cell height

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

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