Forum Moderators: open

Message Too Old, No Replies

Gaps between rollover images in table Mozilla NN7

No CSS will do!

         

Macguru

5:30 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Guys, it is past midnight here and I am pulling my hairs! I want to get rid of horizontal 1 milimeter gaps between rollover images. It shows only in Mozilla/NN7 for Windows.

I have this navigation gizmos with background images. I removed JS and reduced text size of example to avoid side scroling in this message. As you can see there is no hard returns in code, but the gaps are still there.

<TD STYLE="background-image:url(images/bg.gif)" VALIGN="TOP">
<TABLE WIDTH="156" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD><A HREF="foo.htm"><IMG SRC="foo.gif" WIDTH="156" HEIGHT="75" BORDER="0" ALT="foo"></A></TD></TR>
<TR><TD><A HREF="gizmo.htm"><IMG SRC="gizmo.gif" WIDTH="156" HEIGHT="20"ALT="gizmo"></A></TD></TR>
<TR><TD STYLE="background-image:url(images/bg_2.gif)" VALIGN="TOP"></TD></TR>
</TABLE>
</TD>

I have tried CSS to fix this. Even hard coded in page or remotely called either or both CSS wont fix it.

img {
margin:0px;
padding:0px;
}

td img {
display: block;
}

I see those gaps without any CSS. HTML validates exept for NN4 body margins.

What am I doing wrong again? ;)

msr986

5:50 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Where are you getting the gap? I just put your code snippet into MOZ and the two images are touching. Same as IE6.

Macguru

6:00 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I am getting horizontal gaps between the images. The nav menu looks like a ladder to me.

The only difference between the example code I posted is the JS rollover noise :

onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','images/nav_prochain_on.gif',1)"

I am going to try it without the JS part.

msr986, are you using any CSS right now?

msr986

6:12 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No, I left the CSS out.

Of course, the snippet you posted is out of context. It is possible that the snippet code works correctly and the complete code does not.

Macguru

6:16 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You are absolutely right msr986,

I just pasted the whole <td>...</td> in some new page and it works flawlessly.

Must have left some garbage somewhere else. Thanks for your help!

Macguru

6:49 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OK, getting closer... The gaps are showing when I use the loose or strict HTML 4.01 doctype.

When I remove it, the problem is solved. I need CSS for this site, any idea?

SuzyUK

9:59 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Macguru..try

td img {display: block}

in your CSS

Suzy

Macguru

10:28 am on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks SuzyUK,

I tried that before (see first message of thread). But I tried it again with a fresh css file in a fresh style folder, and it worked!

Must be some ftp accident during the upload. I will never know. Sorry guys!

Ready to attack table height now!

It's past 5 am and I am still in front of my screens, my GF is going to kill me. ;)