CODEWITHSUNDEEP
htmlcss
MMacD
MMacD

Reputation: 349

Unwanted margin

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>

Upvotes: 0

Views: 66

Answers (3)

xzegga
xzegga

Reputation: 3139

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>

Upvotes: 0

Jack Connor
Jack Connor

Reputation: 111

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

enter image description here

Upvotes: 1

almo
almo

Reputation: 6367

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

Upvotes: 2

Related Questions