I have a table which has three rows of one cell each. I have specified the height of each cell by a class referring to an external stylesheet. There are two other classes which may be relevant, one in an internal stylesheet, and one referring to the same external stylesheet.
In Firefox and Internet Explorer 5.2 (the latest available for the Mac, as far as I know), these cells are displayed correctly, but in Safari, they cut off at the bottom of the text in the box, and are therefore not the correct height. Can anyone help me correct this, please?
This is the code:
[code=html]<STYLE TYPE=”text/css” MEDIA=screen>
<!– .rbc { color: white; background-color: maroon; } –>
</STYLE>
<tr class=”rb2″>
<td class=”rbc”>
<div class=”squash”>some text</div>
<div class=”squash”>some more text</div>
<div class=”squash”>yet more text</div>
<div class=”squash”>guess what? some more text!</div>
</td>
</tr>
This is the CSS:
[CODE]
.rb2 {
height: 133px;
vertical-align: top;
}
.squash {
line-height: 85%;
}
There are other differences, all with Internet Explorer not behaving properly, but I’ll do one question at a time, or it’ll get confusing!
Thanks in advance.