Welcome to WebmasterWorld Guest from 54.163.35.238

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)

WebmasterWorld Senior Member 10+ Year Member



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:-



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

Further reading:-



birdbrain

penders

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member 5+ Year Member



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)

WebmasterWorld Senior Member 10+ Year Member



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)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



é

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)

5+ Year Member



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)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month