Preserved Topic: persistant gaps between images... help plz! (Page 1 of 1)

hey all i'm new here... and i really could use some help =) i'm working on this page, here: http://fireshock.midaszero.net/bpa/graphics/navanimation.html

now as you can see, the slices of the nav bar are not touching, and it's driving me insane. cell padding and spacing are both 0, so that's not the problem... i've had several people look at this and they couldn't figure it out, so any help would be much appreciated!! thanks!

-------
*blu*
fireshock4@earthlink.net
http://fireshock.midaszero.net

Relly want to know what it is? It's the spacing gaps between your table data cell calls, and the image information.

Edit the table HTML and remove the spaces after your TR and TD definitions. If there's no gap between the TD call and the IMG call, then those spaces will disappear.

well, i did what you suggested... and it still didn't work =( the gaps are still there - grrrr... maybe i didn't do it right? i deleted the spaces like you said... anything else to try?

-------
*blu*
fireshock4@earthlink.net
http://fireshock.midaszero.net

Without looking too close at the HTML (things are a little late here) I see a few things that can make stuff mess up within browsers.
First the -TAB(s)- When doing the nested table nasty, try not to indent. This can make the browser think there needs something to fill that TAB void. This doesn't always happen, and don't ask me why when it does.
Next, mixed case can be a real big no-no. This can also make things sometimes act funny and / or screwy.

If neither of those work out at all, here is an easy way to troubleshoot your one nested table. Remove that nested table, and place it on it's own page. If it works fine there, then you know it's something within your other tables. I notice you have an ImageReady sliced table, and then you've your own HTML placed in. I know (or think I know) ImageReady does not make nested tables, so this might be where you are haveing "issues".

Looking back once again, I see you've got td width="*%" and td width="*" later on. I would think that percent vs. pixel might mess things up as well.

If nothing I've suggested has worked. Put your Nav / Menu stuff on a page, upload it, and I'll help you to trouble shoot it.


Good Luck.

*scratches head* oy....

Good luck

*shivvvers*

Those kinds of tables are nasty to trouble shoot!

Setting border="1" temporarily can help locate the problem; you can see if the space is below or on top of the images, or between the table cells, or what.

OK, I look at this code and can quickly see where some of the gap is coming from. The important thing is to understand that spaces and 'returns' in your code do something specific, and for a reason. If this were just text, and you typed to a point and hit a return (without adding a space after it) and then continued typing text on the next line, it would add one letter-width space there to make your text readable. You've eliminated the space before and after your <td> tags, but you still have the <a href> tags seperate from the <img> tags. Bunch all of the code in the middle of your <td> tags together, on one line. If you want to add breaks to make it more readable, add them in the middle of a tag, like this...

<img
src="foo.gif">

(That's allowed! How cool.) You're more than halfway there, step through and eliminate those spaces and your images will snap together! (I also like the idea of adding a "border=1" to the table opening, this way you can see which cells have gaps. I have to do this a lot, it becomes second nature.)

Your pal, -doc-

Hi blu!

You may want to look at your HTML again. From what I can see, there are still spaces in your script where the images are. Make sure that the <td> tags are all on one line. Meaning that the opening <td> tag to the <image> tag to the closing tags for everything, </td> are all on one line. So you would have <td><image><a></a></td> all on one line. That should work.

If not, then the images were sliced wrong. But I think the DG had it right, there are still spacings in your table cells.

Later,
C:\


~Binary is best~

Also, another thing you could do is div align them using this code:

<div style="position:absolute;top:0px;left:0px;><img src="whatever.gif"></div>


The top and left commands state how many pixels your image is from the top and left, and its best to use pixels when your making a webpage.

edit: and you dont have to use tables for this either... it eliminates the extra tags...



[This message has been edited by InSiDeR (edited 01-21-2002).]

blu: I've been playing with this page ever since you told me about it last night on aim >.< curse you! hehe, just kidding... but anyways.. i've found a solution to the problem.

-----begin code-----
<TABLE height=405 cellSpacing=0 cellPadding=0 width=439 border=0>
<TBODY>
<TR>
<TD width=10><IMG height=10
src="navanimationFinal_files/contentbars_07.gif" width=10></TD>
<TD width=463><IMG height=10
src="navanimationFinal_files/contentbars_08.gif" width=450></TD>
<TD width=10><IMG height=10
src="navanimationFinal_files/contentbars_09.gif" width=10></TD>
</TR>
<TR>
<TD width=10><IMG height=440
src="navanimationFinal_files/contentbars_12.gif" width=10></TD>
<TD width=463>  </TD>
<TD width=10><IMG height=440
src="navanimationFinal_files/contentbars_14.gif" width=10></TD>
</TR>
<TR>
<TD width=10 height=2><IMG height=10
src="navanimationFinal_files/contentbars_17.gif" width=10></TD>
<TD width=463 height=2><IMG height=10
src="navanimationFinal_files/contentbars_18.gif" width=450></TD>
<TD width=10 height=2><IMG height=10
src="navanimationFinal_files/contentbars_19.gif"
width=10></TD>
</TR>
</TBODY>
</TABLE>
-----end code-----

if you take a look at the bold, italicized part.. make those images just a little shorter. i'm not sure how important it is to you to have those images quite that tall, but if you reduce them to 420 px or so, everything lines up pretty nicely.

[edit]
tested with it, and played around. the max size they can be is 422 pixels, otherwise you're gonna get gaps... (i'm no HTML guru so i dunno why it is this way.. if somebody wants to explain why i'd like to learn too )
[/edit]



[This message has been edited by Raptor (edited 01-20-2002).]

ah, excellent. thanks guys!! i solved the problem... i added a spacer in the bottom cell (which basically did the same thing as shrinking the pix, rappy) and it worked. woohoo!

that's a lot of good info about the spaces in the html. i never knew that Enters could do that!! (*will be careful from now on!) thanks again for all your help guys! =)

-------
*blu*
fireshock4@earthlink.net
http://fireshock.midaszero.net

Well people, I'm going to archive this now, as there has not been a reply since January, and there is lots of useful information in it. This thread has been closed. Do not collect $200.

I'm crazy, mad, psychotic,
Insaniac, neurotic,
My voice is quite robotic,
And I never Shut Up!
Sung to the tune of "The Addams Family"