image table CSS

[sssweb]

I have a table comprised of image slices, some of which link to other pages on my site. The problem is that the link slices throw the table cell alignment off (due to what looks like a thin strip of the table bckgrd showing under the image). Can someone give me some basic CSS advice on handling this that works in all the main browsers? I've tried several solutions & can't get it to work. (I have also tested the table w/o links, and it looks fine, so I know it's not my table.)

Specifically, I need to know the following:

1) What CSS property might affect this; I've tried:

border: none;
background-color: transparent;
background-image: none;
text-decoration: none;

2) How do I define the CSS class; I've tried:

.class, a.class, a.class:link, .class a, .class a:link

3) To which element, the image or the link (or both), should I apply the CSS?

(I've also tried both the full & half transitional doc types, and can't get it to fully work in either, though it's better in the half version. For what it's worth, Opera browser always displays it correctly, IE is OK in half trans. DOC TYPE, and Firefox never displays right.)

Any help is appreciated.

[edited by: sssweb at 3:33 pm (utc) on Jun 16, 2010]

[Drag_Racer]

TD {padding:0;}
IMG {border:0;}

try one of those two.

by default on most browsers, table cells have a small amount of padding. Also images may have a border.

[sssweb]

I have cellpadding="0" set in the <table> tag already, but I tried your CSS anyway. I used .class TD {padding:0;}, and called it both in <table> and <td>. No change.

IMG {border:0;} doesn't work either.

Any other ideas?

[Fotiman]

Some things to try:
1. Remove all whitespace from within the td element (no space before or after the img): <td><img ...></td> (note, closing </td> on same line)

2. Try the following style rule:
a img { margin: 0; border: 0; padding: 0; }

3. Use Firebug to inspect the img and td to see what styles are affecting the layout.

4. Don't use tables for layout. ;)

[sssweb]

Thanks for the ideas.

1 & 2 didn't work.

I'm working on #3 now; will post results.

Re #4, you know, when I started re-making my page I planned to do exactly that, but after spending a day trying to learn the CSS method, I found it to be just as confusing and quirky as the table method. If you can point me to a SIMPLE tutorial on how to do it, I'm willing to re-try.

P.S. Now I notice that there's a 1px line of table bckgrd color running along the bottom edge of my table, despite trying border="0", style="border:0", and style="border:none" in the <table> tag.

[sssweb]

Okay, using the IE Developer's Tool, I think I found what it is -- Fotiman, maybe #1 is right after all. Before, I took out all whitespace between the <td> and <img> tags, but my links use js roll-over code that spans several lines, so I didn't remove line breaks before & after the <a> tags. Developer Tool shows a larger dimension for the link element than for the image inside it, even though there's no border, padding, or margin anywhere. So I tried taking the whitespace out and that cell fell back into place. I'll try it with all and post the result.

That's the first I've heard about browsers being that picky about whitespace. Is that normal?

[sssweb]

Yep, that did it. Funny though, I have a drop-down menu on the page in one of the table cells and there are plenty of line-breaks in that <td>, but it doesn't throw the table off. It only happens around a <a> tag.