Why does Safari ignore css table row (tr) height attributes after re-draw?

StackOverflow https://stackoverflow.com/questions/1627083

Question

I'm struggling to apply css-styling to a GWT (Google Web Toolkit) generated html table in Safari. Specifically, I cannot get Safari to respect the height attribute of a table row after I trigger any kind of re-draw 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 renders correctly at first. If I then choose "disable styles" from the Develop menu and then immediately re-enable them again, the heigh rule is ignored and the height of the table row is calculated as if it were set to "auto".

This is exactly what happens when rows/cells are added or removed programatically in my GWT FlexTable.

Does anyone know what causes this behavior and if there is a workaround that does not require setting a fixed height on the entire table?

Details: Running Safari Version 4.0.3 (5531.9) on Mac OSX Leopard
The problem also occurs using the GWT Hosted Mode browser (which essentially is Safari when running it on a mac)

Was it helpful?

Solution

TR tags have no height attribute in the W3C specs. You should set the height of the TD tags it contains, instead.

OTHER TIPS

WebKit is optimized for performance and refuses sometimes to redraw certain areas, if it thinks it doesn't have to. You might be able to work around this by triggering a total redraw e.g. resizing the window by 1px and 1px back (there must be some smarter way).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top