Table Cell top spacing problem Options

[NitroPress]

I thought I had a handle on all the various top-spacing, margin-collapse problems but this one is new (or forgotten). I have searched repeatedly but can't locate any posts on this problem.

I have a very simple table-inside-div site layout I am developing. I want a simple, flexible table definition that can be used for a variety of layouts.

If I use it with one TD per TR, the top spacing the in the cell is fine. When I got to two columns in the TR, the first cell develops extra top spacing under IE and Firefox (but not under Chrome or Safari/Win. I have cleaned up every spacing definition and added layers of unnecessary ones without curing the fault.

The page validates except for five border-radius warnings ('not in CSS 2.1').

Here is the relevant code:

CODE

From the container PHP page:

<div id="pagemain">

    <div class="tablecontent">
        <?php
            include 'en/_products_main.html';
        ?>
    </div>

</div>

From the include HTML file:

<table class="blocktable" cellspacing="30px" width="948" border="0">
    <tr>
        <td>
            <h1>HEADING 1</h1>
            <p>Text text text.</p>
        </td>
        <td>
            <h1>HEADING2</h1>
            <p>Text text text.</p>
        </td>
    </tr>
</table>

From the CSS file:

    #pagemain .tablecontent {
        width: 948px;
        min-height: 200px;
        margin: 10px 0 0 25px;
        border-radius: 15px;
        background: #eef;
        border: 3px #336 inset;
    }
    
        #pagemain .tablecontent .blocktable {
            width: 948px;
            margin: 0;
            padding: 0;
        }
        
        #pagemain .tablecontent .blocktable td {
            padding: 12px 20px 10px 10px;
            background: #fff;
            border: #005291 inset 3px;
            border-radius: 12px;
        }
        
        #pagemain .tablecontent .blocktable td h1 {
            font-size: 125%;
            padding: 0 0 10px 5px;
        }
        
        #pagemain .tablecontent .blocktable td p {
            padding: 0 0 10px 15px;
        }

In this snippet, HEADING 1 is displaced by top space while HEADING 2 is not. WHY!?

Thanks for feedback...

This post has been edited by NitroPress: Feb 9 2012, 11:14 AM

[pandy]

Are you sure the problem shows with only the snips you posted? I don't see it. If it does, with exactly what browser versions do you see it?

[NitroPress]

It shows in FF 10 and IE9; does not show in Chrome 17.x or Safari/Win 5.1.2.

I am pretty sure the snippets represent all the relevant code; as the site under development is proprietary I can't post a link. I may have to create a mirror page if further examination is needed.

[pandy]

Why don't you make sure by viewing the snip you posted in the concerned browsers?

[NitroPress]

Okay, after an incredibly frustrating hour I have this stripped to the essentials; I started with a duplicate file set and removed elements until it was both anonymized and down to just the malfunctioning parts. This is REALLY bizarre.

You can find the live test page at http://www.dgath.com/test/test.php.

The associated files are test.css and _test_main.html (I can't remember how to turn on file listing for a single directory, sorry!)

If you look at this file, you'll note the text in the first two left-hand cells is spaced down. Pull the files down for edit and shorten the first heading to '1234567'... and the problem disappears. The longer the text content of the cell, the longer the heading can be before displaying this oddity. Any heading that goes over length in a left-hand cell will cause the behavior, even if it's the last solo one that does not follow the error behavior. It does not happen if there is no right-hand cell in the row. I don't believe the heading is running into right-spacing limits, though. This is ODD.

What's REALLY odd is that in testing that those files were available I found that the HTML content file will display the behavior without the wrapper or CSS file!

Any suggestion about how to fix this appreciated.

This post has been edited by NitroPress: Feb 10 2012, 02:55 PM

[NitroPress]

All files in the site have now been validated XHTML 1.0 Strict, as well.

[pandy]

Thank you. It's because the right cell has more content and thusly decides the height of both cells. The default value for valign is middle, so the content of the left cell becomes vertically centered. Well, the content of the right cell also does, but it doesn't show since it fills the cell.
http://htmlhelp.com/reference/html40/tables/td.html

Set valign to top or use CSS vertical-align to do the same thing.

[NitroPress]

Amazing... thanks!

It never occurred to me that it was a vertical spacing issue since the amount of type in both is the same; I see now that the cells are horizontally unequal (which in the end is the real problem I need to fix, for a balanced layout).

Do you have an idea on why something as subtle as the length of the heading (nowhere near line-break length) would cause it to jump back and forth? I also find it peculiar that it would not occur in a single cell row... I know the quirks of browser interpretation can be subtle, but this one is the oddest I've encountered in a while.

Thanks very much for the sharp eye.

This post has been edited by NitroPress: Yesterday, 06:06 PM

This post has been edited by pandy: Feb 11 2012, 11:18 PM

[pandy]

It never occurred to me that it was a vertical spacing issue since the amount of type in both is the same; I see now that the cells are horizontally unequal (which in the end is the real problem I need to fix, for a balanced layout).

I don't know why that happens. How the width of the table is distributed is sometimes a little of a mystery. But just make each column 50% and that problem goes away.

Unless you plan to have identical content in both columns on the real site, you still need the top alignment though.

Do you have an idea on why something as subtle as the length of the heading (nowhere near line-break length) would cause it to jump back and forth? I also find it peculiar that it would not occur in a single cell row... I know the quirks of browser interpretation can be subtle, but this one is the oddest I've encountered in a while.

I'm afraid I don't see any difference with the short heading.

FYI I haven't made any changes to your post above. I clicked Edit instead of Quote by mistake and overwrote it. When I restored it the edit line turned up.

[NitroPress]

I don't know why that happens. How the width of the table is distributed is sometimes a little of a mystery. But just make each column 50% and that problem goes away.

I am trying to create a simple template that will allow me to use 1- 2- or 3-column tables with as few special tags and overrides as possible. I managed to make things balance with two tags that apply a fixed width to 1 or 2 of the columns; that's as simple as I can get it. It is a mystery as to why identical content will cause varying column widths, though...

FYI I haven't made any changes to your post above. I clicked Edit instead of Quote by mistake and overwrote it. When I restored it the edit line turned up.

You removed all my top-secret exposé on how UFO propulsion systems cause HTML layout to shift!

Thanks again.