Clever Geek Handbook

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)

+2


source to share


2 answers


Tags

TR

do not have a height attribute in the W3C specifications. Instead, you have to set the height of the tags TD

it contains.



+3


source


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).



0


source






More articles:


All Articles