Home/ Questions/Q 8332429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:43:18+00:00

I’m wrapping my form with a table, My table is as follows : 9

  • 0

I’m wrapping my form with a table,

My table is as follows : 9 cells, 3 rows, 3 cols, [0,0] is top left corner, [1,1] is main form content, and [2,2] is bottom right corner [all are zero indexed in my description]. I’m wrapping my form so I can put a ‘drop shadow’ around it.

My problem : cells in [row 0] and [row 2] are suppose to be 8px high, instead they are 22px.

I’m using the 4 corner cells of the table to show rounded edges, but the other 4 ‘edge’ cells are repeating a background with 1px dimension, either high or wide depending on whether its repeated in x or y, but where they ‘repeat-x’ in [row 0] and [row 2], the td’s are not sticking to the height correctly.

Borwsers : IE was only showing the problem in in ‘IE 7/8’ compatibility view, but chrome and firefox has started doing the same, think my DOCTYPE is affecting it.

I have attached a screen shot portion and some HTML editted to remove the horrible long Web Resouce URL’s it produces (I’m making this as a webcontrol)

screen shot of top left corner showing the issue

<table cellpadding=0 cellspacing=0 border=0 style="width:560px;">
<tr>
    <td style="background-image:url('url'); width:8px; height:8px;">
        <img src='url' width='8' height='8'/>
    </td>   
    <td style="background-image:url('url'); height:8px;">
        <img src='url' height='8'/>
    </td>   
    <td  style="background-image:url('url'); width:9px; height:8px;">
        <img src='url' width='9' height='8'/>
    </td>
</tr>
<tr>
    <td style="background-image:url('url'); width:8px;">
    </td>
    <td  style="background-color:#DDDDDD">
        <!-- main table content !-->
    </td>
    <td style="background-image:url('url')">
    </td>
</tr>
<tr>
    <td style="background-image:url('url') width='8' height='9'>
        <img src='url' width='8' height='9'/>
    </td>
    <td style="background-image:url('url') height='9'>
    </td>
    <td style="background-image:url('url'); width:9px; height:9px;">
        <img src='url' width='9' height='9'/>
    </td>

</tr>

</table>

I’ve had trouble with tables not confirming to correctly height or width before, and previous fixes where making sure there wasn’t text (or black characters) enforcing a height, and making sure the table cell isn’t empty (I’m inserted the bg image as an img tag in some of the cells, no effect).

I’m really hoping this is a well known issue with HTML, please help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Normally, I’d decry the use of tables in layout, but this is one case where there isn’t really a good alternative (maybe once border-image gets better support). That being said, the HTML5 spec requires that a table used for layout is given the role="presentation" attribute, for the sake of screen readers and similar (e.g. accessibility for the blind). It’s still probably going to give them a hard time, and also probably going to mess with search engine spiders, but that’s your choice.

    Secondly, inline styling like that is going to cause a maintenance nightmare. You should have an external stylesheet, and include it with <link rel="stylesheet" type="text/css" href="URL.css"/>. Using class and id attributes will make your table (or anything else) much easier to style.

    Thirdly, you mention that you think your doctype is causing problems, but you haven’t included it. Regardless, you should probably use the HTML5 doctype – which is just <!DOCTYPE html>. The old HTML 4.x/XHTML 1.x/etc. doctypes are probably not a good thing to keep using.

    Putting all that together, you have HTML that looks kind of like this:

    <!DOCTYPE html>
<html>
    <head>
        <!-- any other header stuff you need, like meta or title -->
        <link rel="stylesheet" type="text/css" href="something.css"/>
    </head>

    <body>

        <table id="mainLayout" role="presentation">
            <thead>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="left-cell"></td>
                    <td><!-- main content goes here. --></td>
                    <td class="right-cell"></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td class="left-cell"></td>
                    <td></td>
                    <td class="right-cell"></td>
                </tr>
            </tfoot>
        </table>

    </body>
</html>

    Now for the CSS:

    table#mainLayout
{
    margin: 0;
    padding: 0;
}

table#mainLayout td
{
    margin: 0;
    padding: 0;
}

table#mainLayout thead tr
{
    height: 8px;
}

table#mainLayout tfoot tr
{
    height: 9px;
}

table#mainLayout .left-cell
{
    width: 8px;
}

table#mainLayout .right-cell
{
    width: 9px;
}

table#mainLayout thead td
{
    background-image: url(wherever the image goes);
}

table#mainLayout thead td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout thead td.right-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tbody td.right-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td.left-cell
{
    background-image: url(wherever the image goes);
}

table#mainLayout tfoot td.right-cell
{
    background-image: url(wherever the image goes);
}

    The more specific rules (including .left-cell/.right-cell) override the less-specific rules, so it’s not necessary to have a .center-cell rule.

    • 0