Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
The html for three small pictures is:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="110" height="150" align="center" valign="middle"><a href="w01001.htm"><img src="w01001thl.jpg" width="100" height="130" border="0"></a></td>
<td width="110" align="center" valign="middle"><a href="w01001.htm"><img src="w01001thm.jpg" width="100" height="130" border="0"></a></td>
<td width="110" align="center" valign="middle"><a href="w01001.htm"><img src="w01001thr.jpg" width="100" height="130" border="0"></a></td>
</tr>
</table>
The css is:
body {
margin: 0px 0px 0px 0px;
background-color: #222222;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 12px;
}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #222222;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #555555;
}
What makes these pictures jump upwards only in IE8?
Many thanks for any advice or info.
The Doctype you specified in your post invokes 'almost standards mode'. By using this rendering mode, the layout of images inside table cells is handled the same way 'quirks' mode operates, although IE8 is clearly getting this wrong.
The gap you are seeing is caused by the 'descender space' - a space reserved for descenders in lowercase letters like 'p', 'q', 'y', etc, thus, if you increase the font-size that is applied to the affected elements, this descender space will increase in size.
Inline elements, are by default, drawn at the baseline of the linebox (i.e 'vertical-align:baseline' is the default value'), so this issue can be fixed by applying 'vertical-align:bottom' to the IMG element. Another fix is to make the IMG a block-level element. In this case however, IE8 is initially drawing the IMG element at the bottom of the linebox, but gets re-drawn on the baseline on :hover. The normative behaviour is that the descender space should always be computed, and taken into account before the element is drawn, to prevent any reflowing of content following the element in question.
I have in fact, already documented this bug and submitted it at Connect, however I was unaware of this particular behaviour, where the 'height' and
[edited by: SuzyUK at 6:09 pm (utc) on June 19, 2009]
[edit reason] No personal URI's per Charter [/edit]
