homepage Welcome to WebmasterWorld Guest from 54.226.80.55
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Space between images in a table
spongenika




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




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



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

Further reading:-



birdbrain

penders




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




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




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




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

img {
display:block;
}

It really works. Thanks a lot.

alt131




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




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




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




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




msg:4401202
 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.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved