Reputation: 18560
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
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
Reputation: 4783
This seemed to fix things for me.
CSS:
table {
width: 610px;
border-spacing:0; /* Add this here */
}
Upvotes: 12