CODEWITHSUNDEEP
htmlcssbrowser
Jake Conkerton-Darby
Jake Conkerton-Darby

Reputation: 1101

Browsers modify my HTML, resulting in incorrect output

I have some HTML I crafted to emulate the desired output of a software I develop. I have confirmed (as best I can) that the file is correctly formatted, but when I open it in either Chrome or IE (may also occur in others) the browser alters the HTML I provide giving an incorrect output.

The HTML I created is:

<!DOCTYPE html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;vertical-align:top;text-align:left}
        table{border-collapse:collapse;}
        </style>
    </head>
    <body>
        <table style="margin-left:15pt">
            <tr>
                <table>
                    <tr>
                        <td style="width:315.43pt"/>
                        <td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt">
                            Thursday, May 04, 2017
                        </td>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td style="height:14.26pt"/>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt">
                            Dear Someone,
                        </td>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td style="height:21.95pt"/>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td>
                            <table>
                                <tr>
                                    <td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt">
                                        This text represents the contents of the email.
                                        <br/>
                                        <br/>
                                        Blah Blah
                                        <br/>
                                        <br/>
                                        Bibble.
                                        <br/>
                                        <br/>
                                        Note how the line breaks get stripped from the text!
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td style="width:5.24pt"/>
                        <td style="vertical-align:top">
                            <table>
                                <tr>
                                    <td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;">
                                        This text represents the contents of the emai.
                                        <br/>
                                        <br/>
                                        Blah Blah
                                        <br/>
                                        <br/>
                                        Bibble.
                                        <br/>
                                        <br/>
                                        HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)!
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td style="height:43.7pt"/>
                    </tr>
                </table>
            </tr>
            <tr>
                <table>
                    <tr>
                        <td style="width:0.06pt"/>
                        <td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
                                                                            This image could be the signature:
                        </td>
                        <td style="width:77.95pt"/>
                        <td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
                                                                            This image is from the internet
                        </td>
                    </tr>
                </table>
            </tr>
        </table>
    </body>
</html>

But when I open it in chrome and view the source I get:

<!DOCTYPE html>
<html><head>
        <style>
        *{margin:0;padding:0;vertical-align:top;text-align:left}
        table{border-collapse:collapse;}
        </style>
    </head>
    <body>
        <table style="border-collapse:separate;">
            <tbody><tr>
                </tr></tbody></table><table>
                    <tbody><tr>
                        <td style="width:315.43pt">
                        </td><td style="text-align:right;width:118.93pt;height:12pt;font-family:arial;font-size:10pt">
                            Thursday, May 04, 2017
                        </td>
                    </tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td style="height:14.26pt">
                    </td></tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td style="width:72.21pt;height=12pt;font-family:arial;font-size:10pt">
                            Dear Someone,
                        </td>
                    </tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td style="height:21.95pt">
                    </td></tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td>
                            <table>
                                <tbody><tr>
                                    <td style="height:86.52pt;width:231.89pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt">
                                        This text represents the contents of the email.
                                        <br>
                                        <br>
                                        Blah Blah
                                        <br>
                                        <br>
                                        Bibble.
                                        <br>
                                        <br>
                                        Note how the line breaks get stripped from the text!
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
                        <td style="width:5.24pt">
                        </td><td style="vertical-align:top">
                            <table>
                                <tbody><tr>
                                    <td style="height:100.07pt;width:304.79pt;border-style:solid;border-width:1pt;border-color:lightsteelblue;font-family:arial;font-size:10pt;">
                                        This text represents the contents of the emai.
                                        <br>
                                        <br>
                                        Blah Blah
                                        <br>
                                        <br>
                                        Bibble.
                                        <br>
                                        <br>
                                        HTML format Text Boxes nearly get the formatting right (the Viewer is missing multiple breaks)!
                                    </td>
                                </tr>
                            </tbody></table>
                        </td>
                    </tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td style="height:43.7pt">
                    </td></tr>
                </tbody></table>


                <table>
                    <tbody><tr>
                        <td style="width:0.06pt">
                        </td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
                                                                            This image could be the signature:
                        </td>
                        <td style="width:77.95pt">
                        </td><td style="height:12pt;width:190.75pt;font-family:arial;font-size:10pt">
                                                                            This image is from the internet
                        </td>
                    </tr>
                </tbody></table>



</body></html>

I know the output is a lot of nested tables, but I'm trying to take an indeterminate input akin to a word file, and correctly render it to an HTML that can be sent and displayed via e-mail. I was just wondering why the browser changed the html like this, how to stop it doing this, and if I was able to send an e-mail with my html would the browsers still modify the output when viewed via webmail?

Upvotes: 0

Views: 39

Answers (1)

Quentin
Quentin

Reputation: 943157

The browser modifies the HTML as it parses it because it is performing error recovery.

You have many errors which a validator would pick up.

The main one is that a table row element <tr> can have only table data cells <td> and table header cells <td> as its children. You can't put another table there.

You could put a table in a data cell, but that almost never makes semantic sense.

Upvotes: 1

Related Questions