CODEWITHSUNDEEP
htmlcsshtml-tablemarginpadding
JacobTheDev
JacobTheDev

Reputation: 18560

Table's Getting 1px of Unwanted Padding

For some reason I'm getting a 1px padding or border on a table. I can't figure out how to get rid of it. I've tried adding display:block;margin:0;padding:0; to the images, but that doesn't solve it. I've also tried <table border="0"> and border:none; in the CSS. For the life of me I can't figure this out.

The reason it's a problem is because I'm trying to get images to line up with the edges on both sides of a tr, to give it rounded borders, since CSS3 border-radius doesn't work on TR's. I've added table, table * {border:1px solid red;} to the CSS, and from that, it definitely looks like a padding or margin issue.

The issue is in this image:

on the left and right sides, you can see there's some kind of padding or something between the images and the edge of the table. The red borders are there just to see this.

Here's my CSS:

table a {
    color: #f7941E;
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    /* css3 */
    transition: color .25s;
    -khtml-transition: color .25s;
    -moz-transition: color .25s;
    -o-transition: color .25s;
    -webkit-transition: color .25s;
}

    table a:hover {
        color: #f8ae57;
    }

table {
    width: 610px;
}

    table tr {
        height: 33px;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

        table td {
            border-collapse: collapse;
        }

    table tr.head {
        color: #58585a;
        font-family: Rockwell, serif;
        font-size: 18px;
        font-weight: bold;
        text-transform: lowercase;
    }

    table tr.even {
        background: #EEE;
        height: 33px;
    }

        table tr td img {
            padding: 0 15px 0 13px;
            vertical-align: middle;
        }

            table tr td a img {
                opacity: .6;                
                /* css3 */
                transition: opacity .25s;
                -khtml-transition: opacity .25s;
                -moz-transition: opacity .25s;
                -o-transition: opacity .25s;
                -webkit-transition: opacity .25s;
            }

                table tr td a img:hover {
                    opacity: 1;
                }

And the HTML:

<table border="0">
    <tr>
        <td><img src="images/tr-left.png" style="display:block;margin:0;padding:0;">
        <td><img src="images/some-icon.png" /> <a href="#">Some Content</a></td>
        <td><img src="images/tr-right.png" style="display:block;margin:0;padding:0;">
    </td>
</table>

Upvotes: 16

Views: 18243

Answers (3)

Mohd Abdul Mujib
Mohd Abdul Mujib

Reputation: 13948

My issue was some weird behavior, and I had tried all the tricks in the book, but that padding was stubborn. Finally I found out, that the line-height attribute set for the body element, was creating the effect of padding-top. After overriding which, with a localized rule, of

line-height: normal;

...the problem got solved.

Upvotes: 2

BCDeWitt
BCDeWitt

Reputation: 4783

This seemed to fix things for me.

CSS:

table {
    width: 610px;
    border-spacing:0; /* Add this here */
}

Upvotes: 12

prodigitalson
prodigitalson

Reputation: 60413

Try: <table border="0" cellpadding="0" cellspacing="0">

Upvotes: 27

Related Questions