Home/ Questions/Q 6026113
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:23:56+00:00

<!DOCTYPE html> <html> <head> <title>MyTitle</title> <style type=text/css> body { background-image:url(‘images/my.png’); /*width:100%;*/ height:100%; background-repeat:no-repeat; background-size:100%;

  • 0
<!DOCTYPE html>
<html>
<head>
    <title>MyTitle</title>
    <style type="text/css">
        body
        {
            background-image:url('images/my.png');
            /*width:100%;*/
            height:100%;
            background-repeat:no-repeat;
            background-size:100%;
            /*background-position:0,0,0,0px;
            background-position:center;*/
            margin: 0;
            padding: 0;
        }
        html
        {
            height: 100%;
        }
    </style>
</head>
<body>
    <table cellpadding="0" cellspacing="0"
        style="height:100%; width: 100%; border-collapse: collapse; background-color: Red; border-color:Yellow;">
        <tr style="background-color: Green;">
            <td style="background-color: Blue; text-align: center; vertical-align: bottom; padding-bottom:0px;">
                <div style="margin: 0px 0px 0px 0px; background-color:Silver;">
                    <button type="submit">Some text</button>
                    <p style="">Another text</p>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

FF4. The window is blue, it means td fills the whole window. The div has zero margins, td has zero paddings. Nevertheless, there is a blue rectangle between the div and the bottom edge of the window. How to avoid it? Margin-bottom: -16px; is not an option.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is with the p element – specifically its margin-bottom.

    Collapsing margins are the reason this is happening:

    You can fix it in this instance with overflow: hidden on the div which is the parent of the p.

    Your code: http://jsbin.com/enote5

    Your code with the fix: http://jsbin.com/enote5/2

    (or you could just remove the margin on the p, if you like)

    • 0