a hrefs break tables

grid of image links breaks apart

[mwarring]

I have a table of small images making up a grid. They fit together and look perfect until I add <a href> tags to the images (each one links to a larger photo). Is there a way to keep my table together, either using HTML or CSS? Many thanks for your ideas.

[benihana]

you caould try setting margins, padding to 0 on the imgs in your css. also set the borders to 0.

ben

[mwarring]

Thanks, I tried that and there is no improvement. Also have the table cellspacing and cellpadding set to 0. Am open to more ideas!

[tedster]

Try using css to set the padding and margin to 0 for anchor tags, too?

[garann]

Just guessing, but your problem could be whitespace in your code. If you mean that your images aren't flush with the borders of their table cells, and especially if you're seeing a little bit of extra space to the right of each image, you should check that your A elements are right next to your IMG elements in your code.

So if you have this:

<a href="bigImg.jpg">
<img src="smallImg.jpg" style="height:20px;width:25px;">
</a>

You could try this:

<a href="bigImg.jpg"><img src="smallImg.jpg" style="height:20px;width:25px;"></a>

Same goes for the TD tags, I believe.

[mwarring]

Thank you all . . . tedster you solved my problem. I had set margins and line-spacing for the a tags thinking about text links . . . so now I have them as a separate class and the tables are beautiful! Many thanks.

[g1smd]

Check the white space thing too, as that gives different results in different browsers.