View Full Version : Spacing between table cells with CSS.

02-04-2004, 01:13 PM
I'm trying to freshen up my homepage with CSS and some javascripts. I've run into problems with spacing between table cells/rows. My menu consists of images only, and there's a gap between them that I can't get rid of. Here's a link to the menu in question:


And here's a link to how it really should look like:


Any help appreciated.


Willy Duitt
02-04-2004, 07:17 PM
The most likely cause of your problems was the structure of your datacells (TD). You had the content and closing </TD> broken across new lines and this would add line breaks to the data cell itself.


<td align=right valign=top cellpadding=0>
<a href="./Forside.htm" target="_top"
<img name="Forside" src="Elementer/Meny/KN1-Forside.jpg">

If you tightened everything up, your current codes would most likely render as you would like. However :D

If you are going thru the trouble to update your codes. You should not use TABLES to control the layout of anything but tabular data. In the case of your menu, you should be using DIV's. ;)

Below is an example of your menu laid out using DIV's.
This should give you a start in the right direction.

<BASE HREF="http://home.online.no/~molokken/">
<title>Fritt Fall - Norske Landskap</TITLE>
<style type="text/css">

font-family: Arial;
font-weight: normal;
font-size: 24px;
color: #B2B2B2;
background-color: #222222;

A {
border-style: none;

border-style: none;

border-style: none;
margin-width: 0px;


<div id="openMenuWrapper" style="top:0;float:right">

<div class="MENU"><img src="Elementer/Meny/Topp.jpg"></div>

<div class="MENU"><a href="./Forside.htm" target="_top"
onmouseout="Forside.src='Elementer/Meny/KN1-Forside.jpg';"><img name="Forside" src="Elementer/Meny/KN1-Forside.jpg"></a></div>

<div class="MENU"><a href="./Galleri.htm" target="_top"
onmouseout="Galleri.src='Elementer/Meny/KN2-Galleri.jpg';"><img name="Galleri" src="Elementer/Meny/KN2-Galleri.jpg"></a></div>

<div class="MENU"><a href="./Turer.htm" target="_top"
onmouseout="Turer.src='Elementer/Meny/KN3-Turer.jpg';"><img name="Turer" src="Elementer/Meny/KN3-Turer.jpg"></a></div>

<div class="MENU"><a href="./Tema.htm" target="_top"
onmouseout="Tema.src='Elementer/Meny/KN4-Tema.jpg';"><img name="Tema" src="Elementer/Meny/KN4-Tema.jpg"></a></div>

<div class="MENU"><a href="./FrittFall.htm" target="_top"
onmouseout="FrittFall.src='Elementer/Meny/KN5-FrittFall.jpg';"><img name="FrittFall" src="Elementer/Meny/KN5-FrittFall.jpg"></a></div>

<div class="MENU"><img src="Elementer/Meny/Bunn.jpg"></div>

</div id="closeMenuWrapper">


02-04-2004, 07:23 PM
...hmmm... good advice Willy, but I don't think that's the solution (or all of it). My money's on:

img {border:0; display:block;}

I've run into this problem a few times, vidarmol... hope this helps. :)


Willy Duitt
02-04-2004, 07:30 PM
Yes Rich;

I do think your method would work. (see here (http://devedge.netscape.com/viewsource/2002/img-table/))
But, that is a workaround, and the point I was trying to make
was that the image(s) do not belong in a TABLE to begin with. :)


BTW: The codes I posted do work. ;)

02-05-2004, 07:54 PM
Thank you so much for all your help. Really appreciated.

02-05-2004, 08:57 PM
Originally posted by Willy Duitt
But, that is a workaround, and the point I was trying to make
was that the image(s) do not belong in a TABLE to begin with. :)

BTW: The codes I posted do work. ;) [/B]

Yeah, I figured you and I both knew the problem was with putting an image in a table-cell. And I totally agree those images shouldn't be put in tables. I guess I was trying to prevent yet another one of those, "why can't I use tables for my layout" flame-ridden posts. :D