PDA

View Full Version : vertical space between graphics :(

LeafWind
03-16-1999, 04:02 PM
How do you get one graphic to sit directly below another? So that they join seemlessly with no space in between?

I've seen this on other sites, but can't seem to find where now. Right now if I use
I get a vertical gap of about 10 pixels between them, or even if I just run an invisible-pixel gif to the edge of the table cell to force word wrap, I still get the 10 pixel gap. If I try to set the two images in a table with cellspacing, cellpadding, and border all set to zero, I get about 20 pixels blank space between them.

I *know* this works on other sites . . . can someone please help me figure out how?

Thanks,

Bekariso

PS. it's in Netscape 4.5 that I'm testing this and it's not working. I'll need it to work in all major browsers, of course.

------------------
www.LeafWind.com (http://www.LeafWind.com)
Growing web sites that thrive in the winds of change.
Benson
03-16-1999, 04:17 PM
The two row, one column table would be the way to go..is all your punctuation corect, spacing, etc, in your html?

border="0" cellpadding="0" cellspacing="0"

This was originally one graphic, sliced in two?
hearts
03-16-1999, 05:17 PM
in netscape.. there is a little trick.. even if ya put that vspace in the code.. I have learned that if ya put the image tags all on the same line with the
inbetween the image tags (providing you are stacking them in a table)they will stack without that slight annoying gap.
Stephen
03-16-1999, 06:10 PM
I'll just add this point. When coding we tend to put only so much code on each line, so we use line breaks which of course are unimportant in the HTML context but unless you linebreak in the middle of a tag you introduce a space. So I do a lot of this:

<table><tr><td><img src="image1.gif" width=100
height=100></td></tr><tr><td><img src="image2.gif"
width=100 height=50></td></tr></table>

and so on. Notice there's no gaps between any of the tags. The linebreaks take place inside the tags. Well, that's how I do it...
LeafWind
03-16-1999, 07:39 PM
I got it to work, looks great. I needed a combination of everyone's pointers -- the table AND the vspace=0 AND putting everything together on one line, etc.

Thanks everyone!

http://www.aota.net/ubb/smile.gif

Bekariso
Drew
05-12-2000, 02:37 PM
boots--
[nbsp][nbsp] Certainly no fun to read code like that.[nbsp][nbsp]Have you tried using tab?[nbsp][nbsp]Or maybe just consider removing the lines between just the TD's or something?[nbsp][nbsp]I wish I knew how to fix your problem, but I'd hate to have you looking at that code every day ;)

Drew
Dan Kaplan
05-12-2000, 02:51 PM
I'm surprised you see spaces in IE, usually only Netscape does that, unless you are using spaces instead of tabs (hard to tell from the UBB post), like Drew suggested.

For graphics alignment, I'm afraid you will have to run everything together to avoid blank spaces in Netscape.[nbsp][nbsp]If you're just talking about text and pictures that are spaced out, you can continue to use carriage returns and tabs/indents without problems.

Dan
Justin
05-12-2000, 05:18 PM
Spaces between table tags are irrelevant - but spaces *within* the <TD></TD> elements will cause problems. You can do this:
</font><font face="Courier" size="3">
<table>
[nbsp][nbsp] <tr>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<td><img src=somethign></td>
[nbsp][nbsp] </tr>
[nbsp][nbsp] <tr>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<td><img src=whatever></td>
[nbsp][nbsp] </tr>
</table>
</font><font face="Verdana, Arial" size="2">
This shouldn't cause any problems, because anything that is not within the table cells (between <TD> and </TD>) is not visible (as far as white space is concerned).

In HTML, white space is white space. Any number of white space characters equates to one visible space - whether it is a space (ASC 32), tab (ASC 9), carriage return (13) or line feed (10). Doesn't matter which, or how many.

I frequently use the method Stephen mentions - line breaks *within* the tags for readability (especially useful when editing in an editor that does not word wrap). I do that mostly where I have nagivation link buttons that must run together and cannot be in individual table cells (I end up with <a><img></a>
<a><img></a>
... all with no whitespace between tags).

------------------
Justin Nelson
FutureQuest (http://www.FutureQuest.net/index.php) Support
boots
05-13-2000, 01:17 AM
Totally dumbfounded.

Recently switched servers from NT to Unix and now spaces are appearing between graphics regardless of if they are in a table, or not!
I've attempted the use of valign=&quot;absmiddle&quot;, hspace, vspace, and everything I can think of. What bugs me, is I am also having problems with an NT server too! I thought maybe it was my browser, but both Netscape 4.7 and Explorer 5.0 have the same problem. Tell me if this code looks bad:

<table border=&quot;0&quot; height=&quot;83&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; nowrap>
[nbsp]<tr>
[nbsp][nbsp]<td rowspan=&quot;3&quot; align=&quot;right&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/spacer.gif&quot; width=&quot;1&quot; height=&quot;4&quot;>
<FONT SIZE=&quot;+1&quot; COLOR=&quot;#00ff00&quot;>You are our: &amp;nbsp;</FONT>
[nbsp][nbsp]</td>
[nbsp][nbsp]<td width=&quot;247&quot; height=&quot;37&quot; colspan=3>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/chum123.gif&quot; width=&quot;247&quot; height=&quot;37&quot;>
[nbsp][nbsp]</td>
[nbsp][nbsp]<td rowspan=&quot;3&quot; align=&quot;left&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/spacer.gif&quot; width=&quot;1&quot; height=&quot;4&quot;>
<FONT SIZE=&quot;+1&quot; COLOR=&quot;#00ff00&quot;>&amp;nbsp;&amp;quot;Chum!&amp;quot;</FONT>
[nbsp][nbsp]</td>
[nbsp]</tr>
[nbsp]<tr>
[nbsp][nbsp]<td width=&quot;68&quot; height=&quot;20&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/chum4.gif&quot; width=&quot;68&quot; height=&quot;20&quot;>
[nbsp][nbsp]</td>
[nbsp][nbsp]<td width=&quot;90&quot; height=&quot;20&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;/cgi-sys/Count.cgi?df=metbmv.dat|display=Counter|ft=0|tr=F|md=6|dd=A&quot; width=&quot;90&quot; height=&quot;20&quot;>
[nbsp][nbsp]</td>
[nbsp][nbsp]<td width=&quot;89&quot; height=&quot;20&quot;>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/chum6.gif&quot; width=&quot;89&quot; height=&quot;20&quot;>
[nbsp][nbsp]</td>
[nbsp]</tr>
[nbsp]<tr>
[nbsp][nbsp]<td width=&quot;247&quot; height=&quot;26&quot; colspan=3>
[nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp][nbsp]<img src=&quot;art/chum789.gif&quot; width=&quot;247&quot; height=&quot;26&quot;>
[nbsp][nbsp]</td>
[nbsp]</tr>
</table>

it can be viewed in it's native habitat at: http://biteme.metchosin.com/default.htm

Any help would be greatly appreciated.

Cheers,<!-- NO_AUTO_LINK -->
boots
05-13-2000, 01:52 AM
Well, Whatdya know! Replying to my own topic, and in record time too I bet.
Found the Answer to the Problem:

In formatting my html like code to easier read and design/edit my tables:
<table>
[nbsp][nbsp]<tr>
[nbsp][nbsp][nbsp][nbsp]<td>
[nbsp][nbsp][nbsp][nbsp]</td>...etc

it created vertical gaps in my output!
by removing all gaps and tabs,:
<table><tr><td></td>...etc

it has made the code harder to read, but has eliminated all unwanted spaces on output.<!-- NO_AUTO_LINK -->