Padding Stuff

[English Rose]

I have a little layout coding problem. It seems to happen randomly, so I'm a little confused.

I LOVE tables. But sometimes when I code them, they seem to muck up. Whenever I add any padding to the background, the whole background shoves that way. For example, if I have padding-left of 5px, the right side of the background moves to the left 5px.

Is it maybe the file attachment? Should I not use .png images?

Here's the code:

Code:

<TR>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="239" STYLE="background: url(images/[image].png) no-repeat; padding-right:10px;" valign="top">
Content
</TD>

<TD ROWSPAN="1" COLSPAN="1" WIDTH="561" STYLE="background: url(images/[image].png) no-repeat; padding-left:20px;" valign="top">
content
</TD></TR>

FYI, the layout is 800x500. I've checked the image sizes too.

Thanks! :D

[Ash Fohx]

One thing I always do when using background images is specify the position of the background in the CSS.  For instance, in the first cell in the code you provided, I would've made it

Code:

<TD ROWSPAN="1" COLSPAN="1" WIDTH="239" STYLE="background: url(images/[image].png) top left no-repeat; padding-right:10px;" valign="top">
Content
</TD>

I only do this because the position of the background in Firefox/Netscape and IE is slightly different and this can muck up repeating backgrounds, but doing this should fix your problem since it forces the background into the top left-hand corner.  I'm not positive it'll work but it's worth a shot.  I've never had your problem before but it's also been sometime I've since I've last coded a table layout, so I hope it works out. ^^

[English Rose]

Thanks for the reply. I gave it a try, but it doesn't seem to have worked. I must be doing SOMETHING wrong, I just can't see it! XD