Text before opening html tag

HTML & CSS
1

Newbie alert, this is my first post (other than my intro post), so please go easy.

I stumbled across the problem (outlined below) and was hoping someone could shed some light. If you think that my markup/CSS could be improved, please advise, it would be greatly appreciated.

Problem Description:
IE\Win not displaying CSS declarations correctly when there is any kind of text prior to the opening <html> tag.
In the example code below I am floating two block elements side-by-side inside a table column and the content is centered vertically. To do this I am using the display: table-cell trick. When there is text before the <html> tag this trick does not work, however by removing the text before the <html> tag, it works. Also noticed that the table border turns #000 when there is text before the <html> tag.
I ran into this problem because I had PHP outputting HTML comments. The problem does not occur on FF\Win, FF\Mac, SF\Mac. The problem is easily resolved by simply removing any text prior <html> tag, but as a web newbie I am interested in what is actually happening here?

Example markup:

<!--Comment-->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Vertically Align content nested in block/inline elements</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">
        
        body {
            color: #7F7F7F;
            font-family: verdana,arial,helvetica,san-serif;
        }

        table {
            border: 1px solid #000000;
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            table-layout: fixed;
            width: 0;
        }
        
        table tr th,
        table tr td {
            border: 1px solid #CFCFCF;
            overflow: hidden;
            width: 12em;
        }

        table tr td {
            height: 4em;
        }

        table tr td div {
            background-color: #FFFFCF;
            height: 100%;
            overflow: hidden;
            width: 100%;
        }

        table tr td div.left {
            float: left;
            width: 2em;
        }

        table tr td div.right {
            float: right;
            width: 10em;
        }

        table tr td div div {
            display: table; /* To allow nested element to use vertical-align */
        }

        table tr td div.left div {
            background-color: #E7FFDF;
        }

        table tr td div div span {
            display: table-cell; /* enable vertical-align */
            vertical-align: middle;
        }
        
        </style>
    </head>
    <body>
        <table summary="Testing table for vertical align">
            <caption>Vertical Align Test</caption>
            <tr>
                <th scope="col">row 1</th>
                <th scope="col">row 2</th>
                <th scope="col">row 3</th>
                <th scope="col">row 4</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>
                    <div class="left"><div><span>lefttext</span></div></div>
                    <div class="right"><div><span>righttext_longtextthatwilloverflow</span></div></div>
                </td>
            </tr>
        </table>
    </body>
</html>

To test this for yourself simply add/remove “<!–Comment–>” from the beginning of the document.
Note: The problem does not occur if there is newlines, only if there is visible text.

2

Thank you for your help, I think your split cell idea is the way to go, simple is best.

3

Any content prior to the DTD will kick older IEs into quirks mode, where they don’t follow the standards, especially where box sizes are concerned. Call it a bug, though there is not any compelling reason for having that text in an html document. OK, there could be a byte order mark (BOM) for certain encodings, but there is no com…. Well, you get the point.

cheers,

gary

4

Excellent, thank you for your help. I had never heard of quirks mode before, I did say I was a newbie, but I have spent the last hour reading about it. Like you said there is no compelling reason for having any text before the DTD, but atleast I now know about quirks mode.

I had a read on your website about Vertical Centering and I am still stunned that IE 7 and below do not support the display: table group at all. So in the end trying split the cell into 2, while retaining vertical center will not work. I was testing the example code in IE8 and IE8 compatability mode, which I thought was IE7, and it worked in both. When I got home I tried it in IE6 and yep it does not work.

I think in this situation it would be best to use a nested table in the cell to acheive what I want. What do you think?

Once again thank you for your help. :slight_smile:

5

The Sitepoint reference has some helpful information on this topic also :slight_smile:

I think in this situation it would be best to use a nested table in the cell to acheive what I want. What do you think?

A nested table should work.

You could just split the cell if that was the effect you were looking for.

e.g.


<table summary="Testing table for vertical align">
    <caption>
    Vertical Align Test
    </caption>
    <tr>
        <th scope="col">row 1</th>
        <th scope="col">row 2</th>
        <th scope="col">row 3</th>
        <th [B]colspan="2[/B]" scope="col">row 4</th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        [B]<td class="left">Some text </td>
        <td class="right">Some more text</td[/B]>
    </tr>
</table>

It depends on what you want exactly though.

6

Just want to say thanks to Gary and Paul. I now how a better understanding of what was going on, i.e. quirks mode. I have also learnt a few different solutions for centering vertically and also discovered the Box Model Bug. Thanks Guys.

For completeness I thought I would share the solution (below) that best matched my needs. Now when adding/removing any text prior DTD (Quirks Mode) the only difference in IE is the Box Model Bug, so the table gets a little small due to the 1px border.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Vertically Align content nested inside a table cell</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style type="text/css">

        body {
            color: #7F7F7F;
            font-family: verdana,arial,helvetica,san-serif;
        }

        /* Normal Table */
        table {
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            table-layout: fixed;
            width: 0;
        }

        table tr th,
        table tr td {
            border: 1px solid #CFCFCF;
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 12em;
        }

        table tr td {
            height: 4em;
        }


        /* Nested table for split cells */
        table.splitcell tr td {
            border-width: 0;
        }
            
        table.splitcell tr td.left {
            background-color: #E7FFDF;
            width: 2em;
        }

        table.splitcell tr td.right {
            background-color: #FFFFCF;
            width: 10em;
        }

        </style>
    </head>
    <body>
        <table summary="Testing table for vertical align">
            <caption>Vertical Align Test</caption>
            <tr>
                <th scope="col">row 1</th>
                <th scope="col">row 2</th>
                <th scope="col">row 3</th>
                <th scope="col">row 4</th>
            </tr>
            <tr>
                <td>data</td>
                <td>data</td>
                <td>data</td>
                <td>
                    <table class="splitcell">
                        <tr>
                            <td class="left">lefttext</td>
                            <td class="right">righttext_longtextthatwilloverflow</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>
7

Glad you managed to find something suitable for your needs :slight_smile: