pixel gap (html)

[mysterio2099]

Ok, I can't post the entire script because I'm designing a site for a local business, but I can post the parts that I think are the areas of interest. That said, here's the problem:

I have your basic html website, tables, pictures, bla bla bla. The menu uses a javascript onMouseOver type of script for an image flip:

Located in the HEAD tag

index0= new Image(86,20) index0.src = "images/index_08.jpg" index1 = new Image(86,20) index1.src = "images/index_over.jpg" function IndexOver() { document.index.src = index1.src; return true; } function IndexOff() { document.index.src = index0.src; return true; }

with the following code for each menu button:

< A HREF="index.html" onMouseOver="IndexOver()" onMouseOut="IndexOff()" > < IMG NAME="index" SRC="images/index_08.jpg" WIDTH=86 HEIGHT=20 BORDER=0 >

Now, the menu is in a table row that is between two other table rows. If I use basic images for the buttons this problem does not occur (keep that in mind). When using the image flip codes the bottom (3rd row) table is pushed down appx. 5 pixels. This ruins the look of the menu completely.

I'm not sure what is going on here, I've never seen this kind of problem before. If anyone can help me, please let me know.


Thank you.

[Stryker]

Hi mysterio,
You wouldn't happen to have the page you're working on available on the web would you? It would be MUCH easier to anylize the issue it we could see everything at once. You could even copy what you have to notepad and attach it to the thread.

Thanks,
Stryker

[kram 2.0]

I'm not entirely sure I get what you're trying to say. You have a menu, which consists of the image rollovers that you have the scripts written for above. When you define the images without any JavaScript, it comes out perfectly, but when you do have the onMouseOver commands, the "bottom" table is pushed down 5 pixels. What do you mean by the bottom?

And as well, have you tried the rollovers without defining the height and width parameters? Does it work in any browser - in other words, are you testing them in MSIE? And a minor script comment - I believe you need "return true;" in its own line.

kram

[mysterio2099]

Ok, I've attached a .txt with the code, I hope it helps

[mysterio2099]

i just tested in Firefox and Netscape...the problem doesn't exist there. It seems to be only in IE.

[Stryker]

Thanks mysterio,
Ok first thing to try. I notice that before and after your images there are spaces inside the table cell (starts at line 117/118). You have the "href" and the "img" tags on two seperate lines with a space at the end of each.

Try changing from this:

		<td colspan="3">
<A HREF="index.html" onMouseOver="IndexOver()" onMouseOut="IndexOff()"> 
<IMG NAME="index" SRC="images/index_08.jpg" WIDTH=86 HEIGHT=20 BORDER=0></A> 
</td>

To this:

<td colspan="3"><A HREF="index.html" onMouseOver="IndexOver()" onMouseOut="IndexOff()"><IMG NAME="index" SRC="images/index_08.jpg" WIDTH=86 HEIGHT=20 BORDER=0></A></td>

I'll keep poking around, but give that a try and remove the spaces before and after the images.

[Force Flow]

I can't tell exactly what's going on, but this may be related:

http://developer-test.mozilla.org/en...ysterious_Gaps

[mysterio2099]

Guess what Stryker? You win. lol. Just fixing the spaces in the code worked perfect. Thanks a million man! Problem solved

[Stryker]

Wow, first try! That doesn't happen too often.
Glad it worked.

[mysterio2099]

yeah, I was kind of surprised that just putting the code on one line fixed it...I guess I learned a leason...keep your code clean, unlike your room

Thanks again Stryker.