...

View Full Version : remove row spacing in html table!?



jmichayls
12-26-2010, 03:10 PM
Anyone know how I can remove the spaces between the rows in the table at:

wedding.laurapelsferra.org

??

I just spent nearly 3 hours looking at the web, changing every css parameter I could think of, and finally removing all but two of the images in two rows to try and remove the space. But nothing seems to work... Any thought anyone might have would be greatly appreciated.

Shoot2Kill
12-26-2010, 03:29 PM
you could try this way.

I have used a div layout rather than a table layout.


<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link href="../lib/zen.css" type="text/css" rel="StyleSheet" />
<style media="screen" type="text/css">@import
url(http://www.laurapelsferra.org/lib/zen.css);</style>
<title>LPF and JDM Casamento 2010</title>
<style>
body{
width:900px;
text-align:center;
margin: 0 auto;
}
.image{
width:100px;
height:100px;
float:left;
}
.footer{
margin: 0 auto;
border: 1px solid #aaa;
text-align:right;
clear:both;
width:900px;
}
</style>
</head>
<body>
<div class="imagegrid">
<div class="image"><a href="IMG_0390.html"><img width="100" alt="IMG_0390" src="http://wedding.laurapelsferra.org/thumbs/IMG_0390.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8150.html"><img width="100" alt="DSC_8150" src="http://wedding.laurapelsferra.org/thumbs/DSC_8150.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8155.html"><img width="100" alt="DSC_8155" src="http://wedding.laurapelsferra.org/thumbs/DSC_8155.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8176.html"><img width="100" alt="DSC_8176" src="http://wedding.laurapelsferra.org/thumbs/DSC_8176.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8181.html"><img width="100" alt="DSC_8181" src="http://wedding.laurapelsferra.org/thumbs/DSC_8181.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8191.html"><img width="100" alt="DSC_8191" src="http://wedding.laurapelsferra.org/thumbs/DSC_8191.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8198.html"><img width="100" alt="DSC_8198" src="http://wedding.laurapelsferra.org/thumbs/DSC_8198.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8203.html"><img width="100" alt="DSC_8203" src="http://wedding.laurapelsferra.org/thumbs/DSC_8203.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8217.html"><img width="100" alt="DSC_8217" src="http://wedding.laurapelsferra.org/thumbs/DSC_8217.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8218.html"><img width="100" alt="DSC_8218" src="http://wedding.laurapelsferra.org/thumbs/DSC_8218.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8236.html"><img width="100" alt="DSC_8236" src="http://wedding.laurapelsferra.org/thumbs/DSC_8236.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8248.html"><img width="100" alt="DSC_8248" src="http://wedding.laurapelsferra.org/thumbs/DSC_8248.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8250.html"><img width="100" alt="DSC_8250" src="http://wedding.laurapelsferra.org/thumbs/DSC_8250.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8261.html"><img width="100" alt="DSC_8261" src="http://wedding.laurapelsferra.org/thumbs/DSC_8261.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8265.html"><img width="100" alt="DSC_8265" src="http://wedding.laurapelsferra.org/thumbs/DSC_8265.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8274.html"><img width="100" alt="DSC_8274" src="http://wedding.laurapelsferra.org/thumbs/DSC_8274.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8300.html"><img width="100" alt="DSC_8300" src="http://wedding.laurapelsferra.org/thumbs/DSC_8300.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8308.html"><img width="100" alt="DSC_8308" src="http://wedding.laurapelsferra.org/thumbs/DSC_8308.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8319.html"><img width="100" alt="DSC_8319" src="http://wedding.laurapelsferra.org/thumbs/DSC_8319.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8320.html"><img width="100" alt="DSC_8320" src="http://wedding.laurapelsferra.org/thumbs/DSC_8320.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8355.html"><img width="100" alt="DSC_8355" src="http://wedding.laurapelsferra.org/thumbs/DSC_8355.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8359.html"><img width="100" alt="DSC_8359" src="http://wedding.laurapelsferra.org/thumbs/DSC_8359.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8366.html"><img width="100" alt="DSC_8366" src="http://wedding.laurapelsferra.org/thumbs/DSC_8366.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8393.html"><img width="100" alt="DSC_8393" src="http://wedding.laurapelsferra.org/thumbs/DSC_8393.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8405.html"><img width="100" alt="DSC_8405" src="http://wedding.laurapelsferra.org/thumbs/DSC_8405.jpg" height="100" /></a></div>
<div class="image"><a href="DSC_8413.html"><img width="100" alt="DSC_8413" src="http://wedding.laurapelsferra.org/thumbs/DSC_8413.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0138.html"><img width="100" alt="DSCF0138" src="http://wedding.laurapelsferra.org/thumbs/DSCF0138.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0141.html"><img width="100" alt="DSCF0141" src="http://wedding.laurapelsferra.org/thumbs/DSCF0141.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0149.html"><img width="100" alt="DSCF0149" src="http://wedding.laurapelsferra.org/thumbs/DSCF0149.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0154.html"><img width="100" alt="DSCF0154" src="http://wedding.laurapelsferra.org/thumbs/DSCF0154.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0172.html"><img width="100" alt="DSCF0172" src="http://wedding.laurapelsferra.org/thumbs/DSCF0172.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0178.html"><img width="100" alt="DSCF0178" src="http://wedding.laurapelsferra.org/thumbs/DSCF0178.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0184.html"><img width="100" alt="DSCF0184" src="http://wedding.laurapelsferra.org/thumbs/DSCF0184.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0196.html"><img width="100" alt="DSCF0196" src="http://wedding.laurapelsferra.org/thumbs/DSCF0196.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0200.html"><img width="100" alt="DSCF0200" src="http://wedding.laurapelsferra.org/thumbs/DSCF0200.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0207.html"><img width="100" alt="DSCF0207" src="http://wedding.laurapelsferra.org/thumbs/DSCF0207.jpg" height="100" /></a></div>
<div class="image"><a href="DSCF0208.html"><img width="100" alt="DSCF0208" src="http://wedding.laurapelsferra.org/thumbs/DSCF0208.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0189.html"><img width="100" alt="IMG_0189" src="http://wedding.laurapelsferra.org/thumbs/IMG_0189.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0204.html"><img width="100" alt="IMG_0204" src="http://wedding.laurapelsferra.org/thumbs/IMG_0204.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0214.html"><img width="100" alt="IMG_0214" src="http://wedding.laurapelsferra.org/thumbs/IMG_0214.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0225.html"><img width="100" alt="IMG_0225" src="http://wedding.laurapelsferra.org/thumbs/IMG_0225.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0237.html"><img width="100" alt="IMG_0237" src="http://wedding.laurapelsferra.org/thumbs/IMG_0237.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0243.html"><img width="100" alt="IMG_0243" src="http://wedding.laurapelsferra.org/thumbs/IMG_0243.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0247.html"><img width="100" alt="IMG_0247" src="http://wedding.laurapelsferra.org/thumbs/IMG_0247.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0249.html"><img width="100" alt="IMG_0249" src="http://wedding.laurapelsferra.org/thumbs/IMG_0249.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0255.html"><img width="100" alt="IMG_0255" src="http://wedding.laurapelsferra.org/thumbs/IMG_0255.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0262.html"><img width="100" alt="IMG_0262" src="http://wedding.laurapelsferra.org/thumbs/IMG_0262.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0265.html"><img width="100" alt="IMG_0265" src="http://wedding.laurapelsferra.org/thumbs/IMG_0265.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0277.html"><img width="100" alt="IMG_0277" src="http://wedding.laurapelsferra.org/thumbs/IMG_0277.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0280.html"><img width="100" alt="IMG_0280" src="http://wedding.laurapelsferra.org/thumbs/IMG_0280.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0294.html"><img width="100" alt="IMG_0294" src="http://wedding.laurapelsferra.org/thumbs/IMG_0294.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0301.html"><img width="100" alt="IMG_0301" src="http://wedding.laurapelsferra.org/thumbs/IMG_0301.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0312.html"><img width="100" alt="IMG_0312" src="http://wedding.laurapelsferra.org/thumbs/IMG_0312.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0316.html"><img width="100" alt="IMG_0316" src="http://wedding.laurapelsferra.org/thumbs/IMG_0316.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0326.html"><img width="100" alt="IMG_0326" src="http://wedding.laurapelsferra.org/thumbs/IMG_0326.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0331.html"><img width="100" alt="IMG_0331" src="http://wedding.laurapelsferra.org/thumbs/IMG_0331.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0346.html"><img width="100" alt="IMG_0346" src="http://wedding.laurapelsferra.org/thumbs/IMG_0346.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0349.html"><img width="100" alt="IMG_0349" src="http://wedding.laurapelsferra.org/thumbs/IMG_0349.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0350.html"><img width="100" alt="IMG_0350" src="http://wedding.laurapelsferra.org/thumbs/IMG_0350.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0351.html"><img width="100" alt="IMG_0351" src="http://wedding.laurapelsferra.org/thumbs/IMG_0351.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0357.html"><img width="100" alt="IMG_0357" src="http://wedding.laurapelsferra.org/thumbs/IMG_0357.jpg" height="100" /></a></div>
<div class="image"><a href="IMG_0361.html"><img width="100" alt="IMG_0361" src="http://wedding.laurapelsferra.org/thumbs/IMG_0361.jpg" height="100" /></a></div>
</div>
<div class="footer">
LPF and JDM Casamento 2010
</div>
</body>
</html>

Let me know if this helps

Edit: Made the footer display at the bottom properly.

Shoot2Kill
12-26-2010, 03:29 PM
Edit, Sorry - Double Post!

abduraooft
12-26-2010, 03:40 PM
Add
td img{
float:left;
} into your CSS to remove those mysterious gaps (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)!

PS: Add

a img{
border:none;
} to remove those blue borders.

Major Payne
12-28-2010, 03:12 AM
Images, Tables, and Mysterious Gaps: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Might be sure to have: border-collapse: collapse; to style table(s)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum