Forum Moderators: mack

Message Too Old, No Replies

Space between two pics in table

How to get rid of space between two pics in table

         

mcibor

12:16 pm on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


I'm self-taught and I've got a small problem with putting pictures as a menu. They're in <TABLE>, no difference if in one cell, or many. Table has cellSpacing=0, cellPadding=0, border=0. Images have border=0.

In IE 5.0 there is still a space (about 2pixels) between them, but in Mozilla everything is allright. Also if I put them all to background everything is fine. However I'd like to change them on hover (I found a script for that) and with background I don't know how.

Exlemplary code that is not working:
<HTML>
<HEAD>
</HEAD>

<BODY>

<TABLE cellPadding=0 cellSpacing=0 border=0>
<TR>
<TD>
<IMG src="http://www.unipg.it/imm/L2logo.jpg" border=0 width=177 height=127>
</TD>
<TD>
How to get rid of this space?
</TD>
</TR>
<TR><A href="contatti.htm"><TD border=0>
<IMG src="http://www.unipg.it/imm/L2logo.jpg" border=0 width=177 height=127>
</TD></A></TR>
</TABLE>
</BODY>
</HTML>

Thanks in advance

MCibor

Birdman

12:28 pm on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Just a shot, but I have had that problem before and I believe it was caused by the line break in the html.

Try this:
<TD><IMG src="http://www.unipg.it/imm/L2logo.jpg" border=0 width=177 height=127></TD>

All on same line.

mcibor

1:40 pm on Nov 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks! I had no idea it could be something like that, but I checked all the possibilities and the begining doesn't matter, only necessary is <IMG></TD>

Ciao

traffik daddy

4:05 pm on Nov 26, 2003 (gmt 0)

10+ Year Member



Try the following code: Create a backup of what you have first in case its not what your after.

<HTML>
<HEAD>
</HEAD>

<BODY>
<table cellpadding=0 cellspacing=0 border=0>
<tr>
<td width="177"> <img src="http://www.unipg.it/imm/L2logo.jpg" border=0 width=177 height=127></td>
</tr>
<tr><a href="contatti.htm">
<td border=0> <img src="http://www.unipg.it/imm/L2logo.jpg" border=0 width=177 height=127></td>
</a></tr>
</table>
</BODY>
</HTML>

It turns out that you use 2 columns and 2 rows whereas (If I understand you correctly) you only want 2 rows in your table and 1 column - the default column. This is why when your images together creates a gap in the middle of them.

With the 2 columns took then the gap disappears.

Correct me if I'm wrong, you want your images to create a menu with them all being left aligned and underneath each other rather than across the top? If this is the case then this may be what your looking for =)

Terry

yowza

3:34 am on Nov 27, 2003 (gmt 0)

10+ Year Member



You can always use CSS. I know I have used CSS before that got rid of the space; however, I don't remember where I got it.

pageoneresults

3:41 am on Nov 27, 2003 (gmt 0)

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



Any time you have hanging </p> or </td> tags, you'll end up with spacing irregularities. Ever notice that unusual space between the last line of a paragraph? That is normally caused by a hanging </p> tag. The same applies to </td>.

And yes, you could definitely use css to bypass all the presentational issues with tables but, only if you are ready. ;)

MWpro

10:36 pm on Nov 27, 2003 (gmt 0)

10+ Year Member




You can always use CSS. I know I have used CSS before that got rid of the space; however, I don't remember where I got it.

If you set the image's display to block it should remove the white space.