homepage Welcome to WebmasterWorld Guest from 54.227.160.102
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, Moderators: not2easy

CSS Forum

    
Space between images in a table
spongenika



 
Msg#: 4399290 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4399290 posted 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

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



 
Msg#: 4399290 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4399290 posted 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

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



 
Msg#: 4399290 posted 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#: 4399290 posted 11:22 am on Dec 19, 2011 (gmt 0)

img {
display:block;
}

It really works. Thanks a lot.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4399290 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4399290 posted 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

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



 
Msg#: 4399290 posted 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+ Year Member



 
Msg#: 4399290 posted 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

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



 
Msg#: 4399290 posted 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