Help browsers leave space between <tr></tr> element 1

[gus121]

Hi I wish to create a table where a image with curved corners goes around all 4 sides and can extend to accomidate any content in it. My problem is that for some reason it appeares to leave a gap between the the <td></td> tags marked in red.

<table width=178 border=0 cellpadding=0 cellspacing=0 align=&quot;right&quot;>
<tr>
<td><img src=&quot;images/images/Quick_Links_01.gif&quot; width=18 height=18 alt=&quot;&quot;></td>
<td background=&quot;images/images/Quick_Links_02.gif&quot; width=&quot;142&quot; height=&quot;18&quot; > </td>
<td><img src=&quot;images/images/Quick_Links_03.gif&quot; width=18 height=18 alt=&quot;&quot;></td>
</tr>
<tr>
<td background=&quot;images/images/Quick_Links_04.gif&quot;> </td>
<td><img src=&quot;images/images/Quick_Links.gif&quot; width=&quot;124&quot; height=&quot;23&quot; border=&quot;0&quot; alt=&quot;&quot;>
<div class=&quot;quick-links-text&quot;> <b>Latest PrescientQA news</b><br>
Avetech and TDCi partnerships proves hugely beneficial to Boeing
Supply Chain ...</div>
<div class=&quot;quick-links-text&quot;> <b>MSC software partnership</b><br>
MSC Software and TDCi partnership is agreed.. </div>
<div class=&quot;quick-links-text&quot;> <b>Legato announces TDCi is European
Partner of Choice</b><br>
TDCi and Legato will work together to...</div>
</td>
<td background=&quot;images/images/Quick_Links_06.gif&quot;> </td>
</tr>
<tr vAlign=bottom align=left>
<td> <img src=&quot;images/images/Quick_Links_07.gif&quot; width=18 height=18 alt=&quot;&quot;></td>
<td background=&quot;images/images/Quick_Links_08.gif&quot; width=&quot;142&quot; valign=&quot;bottom&quot;> </td>
<td> <img src=&quot;images/images/Quick_Links_09.gif&quot; width=18 height=18 alt=&quot;&quot;></td>
</tr>
</table>

thanks 4 your help

Angus

 

[Boomerang]

Because we can not see the background images it is probably hard to see for us what gap you mean.
Do you mean a horizontal or vertical gap??

As far as I can see there is no horizontal gap.

I only see that the with of the 2nd cell in the 2nd row is &quot;124&quot; should that be &quot;142&quot; This can occur a vertical gap.

I mean:
<td><img src=&quot;images/images/Quick_Links.gif&quot; width=&quot;124&quot; height=&quot;23&quot; border=&quot;0&quot; alt=&quot;&quot;>

should be:

<td><img src=&quot;images/images/Quick_Links.gif&quot; width=&quot;142&quot; height=&quot;23&quot; border=&quot;0&quot; alt=&quot;&quot;>

If this is not what you mean then explain a bit more specific what the problem is.

Can we see your site somewhere whit the images ??

Hope this helps,
Erik





<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->

 

[gus121]

No thats not it.
Its The right hand menu marked Quick Links
There is a small horizonal gap between the 1st and 2nd Row.
I have used CSS to force cell background in the 1st Row to only repeat in the x-axis to partly hide this problem.

thanks

http://www.tdc-hellidon.co.uk/test/

Angus

 

[BHaines]

Try removeing the height=&quot;100%&quot; part from your table statement. This may be forcing additional space inside the table.

 

[gus121]

Thanks but thats not it. That was me fiddling around trying to fix the problem. I have also tried removing the stylesheet this makes no difference.
thanks

Angus

 

[BHaines]

Though it may seem stupid, humor me and try putting quotes around the zeros in cellpadding=0 and cellspacing=0. When I was trying to set up graphics as a border, that was what was messing me up. Hrm...on your tr, you need to set the width of the two tds with the bg images to 18, and the td with where your 124 pixel image is to 142 so they add up. Try that as well.

 

[gus121]

I have implemented all these changes. Appart from the 124 pixel image change Quick_Link.gif (because its a bit confusing but this is the Quick Link.. text image and you would expect it to be smaller width) and uploaded them to the server. it appears i have the same problem. It must be something to do with small 18px gifs I guess?

Angus

 

[BHaines]

Try removing the height parametiers in the 18 px gifs, but leave the width ones, then try throwing the entire tr in one continuous code line. It looks terrible but sometimes tables can get cranky and they consider a line break in the html to be a space in the html. This might not help either, but when I've had table problems, the stupidest things seemed to fix them.

 

[grtfercho]

Voila!

<tr>
<td><img src=&quot;images/images/Quick_Links_01.gif&quot; width=&quot;18&quot; height=&quot;18&quot; alt=&quot;&quot;></td>
<td id=&quot;quick-links-top-bak&quot;><img src=&quot;images/images/spacer.gif&quot; width=&quot;142&quot; height=&quot;1&quot; alt=&quot;&quot;></td>
<td><img src=&quot;images/images/Quick_Links_03.gif&quot; width=&quot;18&quot; height=&quot;18&quot; alt=&quot;&quot;></td>
</tr>


let me know if it worked for you. I don't see the space anymore on the testing page I have here.

grtfercho çB^]\..
&quot;Imagination is more important than Knowledge&quot; A. Einstein

 

[Boomerang]

grtfercho is right.

But only erasing the &amp;nbsp; is enough I think:

<td id=&quot;quick-links-top-bak&quot; width=&quot;142&quot; height=&quot;18&quot;></td>

instead of:

<td id=&quot;quick-links-top-bak&quot; width=&quot;142&quot; height=&quot;18&quot; >&nbsp;</td>

choose the solution that suites you

Hope this helps,
Erik




<-- My sport: Boomerang throwing !!
!! Many Happy Returns !! -->

 

[tviman]

Also, you should explicitly define the border width of your images, even if there is none. Some browsers will automatically place a 1 pixel border around images when no border is specified. Kinda like a default, if you will.




There's always a better way...

 

[EdwardMartinIII]

BHaines: ...but sometimes tables can get cranky and they consider a line break in the html to be a space in the html.

Absolutely!

I used to get caught on this all the time, but it never happens anymore and I still slice and dice images like some kind of Benihana HTML nutjob.

Browsers seem to interpret the carriage-feed/line-return the same as a space, so the only way on the horizonal axis to assure that there is nothing between two elements is to have nothing between them in the code. Not a space or a line return, or even a psychic breath.

Avoiding Lettermans on the vertical axis can be more tricky, especially if you use tables to lay it all out. If you don't have to use tables, then don't. For example, here is a 3 x 3 stack of images with no space between 'em At All, yet no tables:

<div id=&quot;ImageMap&quot;><img src=&quot;Section_1_1.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_2_1.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_3_1.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><br />
<img src=&quot;Section_1_2.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_2_2.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_3_2.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><br />
<img src=&quot;Section_1_3.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_2_3.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img><img src=&quot;Section_3_3.gif height=&quot;5&quot; width=&quot;12&quot; alt=&quot;Section of Image&quot; class=&quot;sansBorder&quot;></img></div>

I tried to keep it fairly simple, but in practice, you would also put in your hyperlinks wherever you needed them.

The <br /> assures that the break will go directly under. In this case, I'd rather do that than do a <p> between each line, which can be somewhat unpredictable.

Hope that helps.

Cheers,


Edward

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door

 

[gus121]

Thanks for all your help. You have all been very helpfull. Once i removed the &nbsp; it lookes fine.

Angus