Space between images in a table

Forum Moderators: not2easy

Message Too Old, No Replies

Space between images in a table

spongenika

8:03 am on Dec 19, 2011 (gmt 0)

I need to find equivalent for cellpadding="0" cellspacing="0" in CSS so it will work in all browsers.
I tried

HTML


<table class="tbl" border="0">
<tr>
 <td><img src="images/logov1.gif" alt="" width="341" height="20"></td>
 <td></td>
 </tr>
 <tr>
 <td><img src="images/logov2.gif" alt="" width="341" height="100"></td>
 <td></td>
 </tr>
</table>

CSS


.tbl{border-collapse: collapse; border-spacing: 0px; width: 100%; padding:0px; }

even I tried


table {
border-collapse : collapse;
}

table td, table th {
padding : 0;
}

It works only in Internet Explorer,
In Firefox and Chrome there is a space between images.

birdbrain

8:52 am on Dec 19, 2011 (gmt 0)

Hi there spongenika,

try it like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
table {
 border-collapse:collapse;
 }
table td, table th {
 padding:0;
 }
img {
 display:block;
 }
</style>

</head>
<body>

<table class="tbl" border="0">
<tr>
<td><img src="images/logov1.gif" alt="" width="341" height="20"></td>
<td></td>
</tr>
<tr>
<td><img src="images/logov2.gif" alt="" width="341" height="100"></td>
<td></td>
</tr>
</table>

</body>
</html>

Further reading:-

Eric A. Meyer article [devedge-temp.mozilla.org]

Also note that the table element should no be used for layout purposes.

Further reading:-

Why tables for layout is stupid: problems defined, solutions offered [hotdesign.com]
Ten ways to speed up the download time of your web pages [webcredible.co.uk]
Nested Tables: About the (ab)use of tables as layout tools in webpages. [dorward.me.uk]
Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS [phrogz.net]
Why go table free? [workingwith.me.uk]
Why avoiding tables (for layout) is important [davespicks.com]

birdbrain

penders

9:08 am on Dec 19, 2011 (gmt 0)

Basically the space you are seeing below the image has nothing to do with table spacing/padding (since you have already removed those), but because images are inline elements by default. Inline elements sit on the baseline of the surrounding (imaginary) text. The gap below the baseline is the space allowed for the descenders of the "g", "j", etc. By changing the img elements to

display:block

, they no longer sit on the baseline and the space goes away.

...and as birdbrain says :)

birdbrain

9:14 am on Dec 19, 2011 (gmt 0)

Hi there penders,

I believe that my link to the Eric A. Meyer article provided all the relevant information. ;)

birdbrain

penders

10:24 am on Dec 19, 2011 (gmt 0)

Yeah true - I'd actually written it before I saw your post, but thought it still relevant as a brief summary. :)

spongenika

11:22 am on Dec 19, 2011 (gmt 0)

img {
display:block;
}

It really works. Thanks a lot.

alt131

12:58 pm on Dec 19, 2011 (gmt 0)

Hi spongenika, and a warm welcome to WebmasterWorld :)

Pleased you have a solution - and thanks for identifying what made the difference - that will benefit later readers with the same problem.

I believe that my link to the Eric A. Meyer article provided all the relevant information.

he he, my first thought was "Move over Meyers, Make way for Penders" ;)
Birdbrain you have to agree that was a fine summary - and it can be very helpful to have an overview of a technical article before diving into the detail.

birdbrain

1:10 pm on Dec 19, 2011 (gmt 0)

Hi there alt131,

of course, I am sad to say, I fully agree. ;)

It was really just sour grapes on my part, as my pr - latin small letter e with acute - cis skills are non-existent. :(

birdbrain

lucy24

5:49 pm on Dec 19, 2011 (gmt 0)

é

In the Latin-1 character set and should therefore behave perfectly well in almost any Forum you could name ;)

Jonesy

5:07 pm on Dec 24, 2011 (gmt 0)

That did not render correctly here in either
konqueror, FireFox, Chrome, or Opera.
hmmmmm... But it did in Epiphany.

penders

6:28 pm on Dec 24, 2011 (gmt 0)

That did not render correctly here...

You need to manually change the encoding of this page to UTF-8. (It doesn't render correctly for me either by default. webmasterworld.com does not appear to send the encoding as part of the Content-Type header(?) and on Windows this defaults to ISO-8859-1, so I see 2 characters (capital A tilde + Copyright) where the latin small letter e with acute should be.)