Forum Moderators: open

Message Too Old, No Replies

a hrefs break tables

grid of image links breaks apart

         

mwarring

9:31 am on Jan 8, 2004 (gmt 0)

10+ Year Member



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

9:38 am on Jan 8, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

ben

mwarring

9:52 am on Jan 8, 2004 (gmt 0)

10+ Year Member



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

5:23 pm on Jan 8, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

garann

5:45 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



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

5:53 pm on Jan 8, 2004 (gmt 0)

10+ Year Member



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

9:41 pm on Jan 12, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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