Name That Gap!?!

[ikon]

i cant figure out why there are gaps surrounding a couple of the images on the main page of my website (www.reefscavengers.com). the gaps are surrounding the image on the top left (newlayout1_01.gif), as well as the small link buttons along the top right. the gaps only show up in IE 7; not ff or older IE. Please help if you can!

[djr33]

First basic guess, make sure there is a border of 0 on each image.
CSS (or add the tags):
img {
border: 0;
}

[ikon]

yes i tested to see if that was the issue by adding a border="0" to one of the images with gaps but that didnt solve it.

[Trinithis]

Try :

img {
border-collapse: collapse;
border-width: 0px;
border-style: none;
padding: 0px;
margin: 0px;
}

If it works, try removing one of those styles one at a time because they may be redundant. (I don't have IE7.)

[ikon]

ok i tried that and took one line out at a time but still didnt get rid of the gaps. After looking at it a little closer i think the problem is with the image titled "newlayout1_10.gif" (the image on the top right that includes the credit card logos). It seems that this image is slightly shifted down in its table cell, creating a gap above it and below the image next to it in the same row. so i dont think the problem is with the actual images, but instead with the table?

[jscheuer1]

Looks fine to me in IE 7.

[ikon]

ok not sure if its IE 7, whatever the latest verson of IE is is where its showing up with the gaps.

anyone else see it?

[jscheuer1]

IE 7 is the latest. I just didn't notice it because it is rather slight. I see it now though, and also see it in IE 6, though not in FF or Opera. Opera has some other issues with the layout. You have invalid HTML here:

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<td colspan=2>
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="orders@reefscavengers.com">
<input type="image" src="images/newlayout1_09.gif" align="center" border="0" width="42" height="19" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="display" value="1">
</td>
</form>

It should be:

<td colspan=2>
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="orders@reefscavengers.com">
<input type="image" src="images/newlayout1_09.gif" align="center" border="0" width="42" height="19" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="display" value="1">
</form>			
</td>

Then the problem shows up in all browsers, which is actually a good thing, because now we can reliably fix it:

<td colspan=2>
<form style="margin:-3px 0;" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="orders@reefscavengers.com">
<input style="position:static!important;position:relative;top:1px;" type="image" src="images/newlayout1_09.gif" align="center" border="0" width="42" height="19" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<input type="hidden" name="display" value="1">
</form>			
</td>
<TD>

[benslayton]

yea that form is definately screwin up the top row, if you can do anything with that i would suggest movin it somewhere else...

[jscheuer1]

yea that form is definately screwin up the top row, if you can do anything with that i would suggest movin it somewhere else...

My above method of dealing with it is fine for all modern major browsers, but the problem in Opera persists and is unrelated to the form. There is most likely something off in the cell count in one or more rows.

These table based 'image ready' type layouts are cumbersome, both in byte load and whenever one tries to modify them. They also play poorly on monitors whose size and resolution are such to cause the 'text' to be illegible due to small size.