Why is Safari ignoring the CSS table row height (tr) attributes after re-drawing?
I am trying to apply CSS styling to a GWT (Google Web Toolkit) generated html table in Safari. In particular, I cannot get Safari to respect the table row-height attribute after I run any kind of re-rendering of the table.
The following basic example illustrates the problem:
<html>
<head>
<style type="text/css">
tr {
height: 50px;
font-weight: bold; /* added to prove that other style rules are re-applied when enabling css again */
}
</style>
</head>
<body>
<table border="1px">
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
</body>
</html>
If I open this page in Safari, it displays correctly at first. If I then choose disable styles from the Design menu and then re-enable them, the heigh rule is ignored and the table row height is calculated as if it were set to auto.
This is exactly what happens when rows / cells are added or removed programmatically in my GWT FlexTable.
Does anyone know what is causing this behavior and is there a workaround that doesn't require setting a fixed height on the entire table?
Read more: Running Safari version 4.0.3 (5531.9) on Mac OSX Leopard
The problem also occurs using the GWT Hosted Mode browser (which is essentially Safari when launched on Mac)
TR
do not have a height attribute in the W3C specifications. Instead, you have to set the height of the tags TD
it contains.
WebKit is optimized for performance and sometimes refuses to redraw certain areas if it thinks it isn't necessary. You might be able to get around this by calling a full redraw, eg. resizing the window 1px and 1px back (there must be some smarter way).