0

I'm getting a 2px unwanted margin/padding/border, but can't for the life of me see what's causing it. It comes out the same way in both FF47 and O 36.0.2130.80

enter image description here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            }
       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>
Improve this question
5
  • Can you add a image that desired results?
    – xzegga
    Commented Oct 9, 2016 at 17:51
  • Oeff, a table inside a table.... that is so 1999
    – GreyRoofPigeon
    Commented Oct 9, 2016 at 17:55
  • @LinkinTED I think their are some cases where this still makes sense. HTML emails for example.
    – almo
    Commented Oct 9, 2016 at 17:56
  • JSFiddle will do this
    – user5306470
    Commented Oct 9, 2016 at 17:57
  • @xzegga. I don't understand. If you mean an image that shows what I want, just imagine the current image without those 2 extra pixels around the edge.
    – MMacD
    Commented Oct 9, 2016 at 17:57

3 Answers 3

Reset to default
2

Add 

border-spacing: 0px;

To the table.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            border-spacing: 0px;
            }

       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table><tr><td height="50"></td></tr></table>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>

https://jsfiddle.net/

enter image description here

Improve this answer
0
1

Add "border-collapse: collapse;" to your table element, you can see a pic here:

enter image description here

Improve this answer
1
  • I appreciate your solution, Jack, but already picked Almo's. Frankly, since there are no borders involved, I don't really understand how border-collapse OR border-spacing can work. Something's broken somewhere.
    – MMacD
    Commented Oct 9, 2016 at 18:11
0

You can archieve your goal more clean and professional using divs instead tables:

BODY {
    background-color:#555577;
}
#progress-containes {
    margin-top: 50px; 
    width : 400px;
    height: 30px;
    background-color: #fff;
}
#progress-bar {
    background-color:#780000;
    font: 400 9pt/1 "Verdana","Arial","Helvetica";
    width: 50%;
    color: #fff;
    padding-top: 8px;
    padding-left: 6px;
    box-sizing: border-box;
    height: 100%;
}
<div id="progress-containes">
  <div id="progress-bar">
    FOO
  </div>
</div>

Improve this answer
1
  • Yes, but I'm old-school and prefer tables. The page doesn't jog around so much while being rendered.
    – MMacD
    Commented Oct 9, 2016 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.