In the page Toggle Squares , I have a table made out of an <img /> in every cell generated by JavaScript. I applied the following CSS:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
}
In order to remove all spacing. However, now I'm getting a thin background line of spacing between two adjacent rows. How can I eliminate it?
The page is valid XHTML + CSS.
Thanks for any help.
Regards,
add cellpadding="0" and cellspacing="0" attributes to table, or try to use
border-collapse: collapse;
border-width: 0;
in css..
Fixed:
.game, .game td, .game tr, .game img
{
border: none;
border-spacing: 0;
padding: 0;
margin: 0;
vertical-align: middle;
}
.game td img {
display: block;
}
Images come with their own white space
I was able to get the effect you are looking for with the following code:
The code depicts four solid colored jpegs right next to each other forming a square with no space inbetween:
<html>
<head>
<style>
td { margin 0px; padding: 0px;}
table { border-collapse:collapse;}
</style>
</head>
<body>
<table>
<thead />
<tbody>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
<tr><td><img src="test.jpeg" /></td><td><img src="test.jpeg" /></td></tr>
</tbody>
</table>
</body>
The problem is: inline image is treated as a letter with ascent = height of the image and descent = descent of the font. That means that a table cell that contains only an image has the height that is bigger than the image height.
The simplest way to fix that is to set line-height to zero for the whole table thus suppressing the descent in the text lines or set display: block for all images thus moving them out of inline formatting context into block formatting context.