By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,397 Members | 2,515 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,397 IT Pros & Developers. It's quick & easy.

xhtml css table spacing between rows

P: n/a
Hi.

I've got a somewhat wired problems with an extra space between table
rows in Mozilla and Opera (IE works fine).

With the code below, cells within a row align seamlessly, but there is a
space of about 5px between table rows.

Any Idea?

xhtml:
> <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<!-- used charmap -->
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<!-- meta informationen -->
<meta name="language" content="de" />
<title>Title - </title>

<!-- StyleSheet for the core design and layout elements -->
<link rel="stylesheet" type="text/css" href="styles/layout.css" />

<!-- StyleSheet for special created classes -->
<link rel="stylesheet" type="text/css" href="styles/classes.css" />

<!-- General StyleSheet for common structural tags -->
<link rel="stylesheet" type="text/css" href="styles/common.css" />
</head>

<body>
<h1>Title</h1>
<table style="border-spacing: 0px; border-collapse: collapse;"
class="nospacing">
<tr class="nospacing">
<td class="nospacing"><img src="quadrant/high/2/A0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/B0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/C0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>

<td class="nospacing"><img src="quadrant/high/2/D0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/E0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/F0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/G0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/H0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/J0.jpg" width="85"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/K0.jpg" width="86"
height="12" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
</tr>
<tr class="nospacing">
<td class="nospacing"><img src="quadrant/high/2/A1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>

<td class="nospacing"><img src="quadrant/high/2/B1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/C1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/D1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/E1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/F1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/G1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/H1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/J1.jpg" width="85"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>
<td class="nospacing"><img src="quadrant/high/2/K1.jpg" width="86"
height="83" style="border-width: 0px; margin: 0px; padding: 0px;" /></td>

</tr>
.... (More rows)
</table>
<<<<<

where the the corresponding css code is>

..nospacing {
border: 0px;
margin: 0px;
padding: 0px;
}

table.nospacing {
border-collapse: collapse;
border: 0px;
margin: 0px;
padding: 0px;
}
<<<<<
Jul 21 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Hi,
With the code below, cells within a row align seamlessly, but there is a
space of about 5px between table rows.

Have you tried border-spacing:0;
(http://www.w3.org/TR/CSS21/tables.ht...rder-spacing)?

Chris
Jul 21 '05 #2

P: n/a
> Have you tried border-spacing:0;

Yes but that didn't help.

Bernd
Jul 21 '05 #3

P: n/a
> http://www.mozilla.org/docs/web-developer/faq.html#gaps

That's it.
Thank you a lot.

Bernd
Jul 21 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.