views:

23

answers:

1

Hello!

I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.

Any ideas?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>TEST</title>
    <style type="text/css">
        table { width: 100%; }
        table td { border: 1px solid black; white-space: nowrap; }
        .delimiter { width: 100%; }
    </style>
    </head>
    <body>
        <table>
            <tr>
                <td><label>Row 1</label></td>
                <td>&nbsp;</td>
                <td><input type="text" value="Field 1" id="field1" size="25"></td>
                <td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
                <td class="delimiter">&nbsp;</td>
            </tr>
            <tr>
                <td><label>Row 2</label></td>
                <td>&nbsp;</td>
                <td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
            </tr>
        </table>
    </body>
</html>
A: 

Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.

Digital Human
Well, I can't use jQuery, because I will have to rewrite whole application then :) P.S. What do you mean 'Use W3C standards'?
Elvis