gaps between imgs in a sliced table

[steffalynn]

This just doesn't make any sense to me. I found out that when you do a mouseover/mouseout function, you have to have each cell (<td>) on the same line or else you'll get these gaps between your images. I have all my code set up exactly the same and for whatever reason I'm only getting a gap around one image, but only in ie--it looks fine on firefox.Here's what I coded:

<TR><TD><a href="survey.html"><img border="0" src="boximgs/survey.jpg"  width="167" height="41" name="b2" onmouseOver="mouseOver2()" onmouseOut="mouseOut2()"  /></a></TD></TR><TR><TD><a href="pbhighlights.html"><img border="0" src="boximgs/pbhighlights.jpg"  width="167" height="39" name="b3" onmouseOver="mouseOver3()" onmouseOut="mouseOut3()"  /></a></TD></TR><TR><TD><a href="fanscorner.html"><img border="0" src="boximgs/fanscorner.jpg"  width="167" height="40" name="b4" onmouseOver="mouseOver4()" onmouseOut="mouseOut4()"  /></a></TD></TR><TR><TD><a href="saywhat.html"><img border="0" src="boximgs/saywhat.jpg"  width="167" height="40" name="b5" onmouseOver="mouseOver5()" onmouseOut="mouseOut5()"  /></a></TD></TR><TR><TD><a href="tv.html"><img border="0" src="boximgs/tv.jpg"  width="167" height="40" name="b6" onmouseOver="mouseOver6()" onmouseOut="mouseOut6()"  /></a></TD></TR><TR><TD><IMG SRC="boximgs/mag.jpg" WIDTH=167 HEIGHT=40 ALT="" /></TD></TR><!--THIS SEEMS TO BE THE "PROBLEM" IMAGE--><TR><TD><a href="archive.html"><img border="0" src="boximgs/archive.jpg"  width="167" height="35" name="b8" onmouseOver="mouseOver8()" onmouseOut="mouseOut8()"  /></a></TD></TR><TR><TD COLSPAN=5><IMG SRC="boximgs/lastupdated.jpg" WIDTH=810 HEIGHT=45 ALT=""></TD></TR></TABLE>

Here's what it looks like in ie (note that there should be the 1 pxl whitespace around each "section"--not my idea, believe me!Please help me! =(

[Guest homeskillet]

I ran into the same problem a few weeks ago... my table looked fine in Firefox but contained white lines between the cells in IE. I read a forum post somewhere about an "IE whitespace" bug. Supposedly, IE will insert those small lines on occasion, but you can "fix" it by running all of your HTML table code onto one line (or... removing the "white space" in your code). It doesn't make sense logically, but it actually did work for my page.For example, this:<TR><TD><a href="survey.html"><img border="0" src="boximgs/survey.jpg" width="167" height="41" name="b2" onmouseOver="mouseOver2()" onmouseOut="mouseOut2()" /></a></TD></TR><TR><TD><a href="pbhighlights.html"><img border="0" src="boximgs/pbhighlights.jpg" width="167" height="39" name="b3" onmouseOver="mouseOver3()" onmouseOut="mouseOut3()" /></a></TD></TR><TR><TD><a href="fanscorner.html"><img border="0" src="boximgs/fanscorner.jpg" width="167" height="40" name="b4" onmouseOver="mouseOver4()" onmouseOut="mouseOut4()" /></a></TD></TR>could be re-written as this to remove the lines between the cells:<TR><TD><a href="survey.html"><img border="0" src="boximgs/survey.jpg" width="167" height="41" name="b2" onmouseOver="mouseOver2()" onmouseOut="mouseOut2()" /></a></TD></TR><TR><TD><a href="pbhighlights.html"><img border="0" src="boximgs/pbhighlights.jpg" width="167" height="39" name="b3" onmouseOver="mouseOver3()" onmouseOut="mouseOut3()" /></a></TD></TR><TR><TD><a href="fanscorner.html"><img border="0" src="boximgs/fanscorner.jpg" width="167" height="40" name="b4" onmouseOver="mouseOver4()" onmouseOut="mouseOut4()" /></a></TD></TR>It makes it harder to read and edit later, but it seems to do the trick.

[steffalynn]

Yah, I had seen that before, and was only having trouble with the bottom image. I figured it out, though: there's a white image to the right of the nav, and I didn't have THAT on one line. So there were two extra pixels for the area with the buttons and it defaulted to the bottom, making it look like that last button was the culprit.Totally weird, and I didn't even include the code that would have given anyone a clue! Thanks for taking a look, though, I totally appreciate it!