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.

PHP Code:


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

Code:

td img{
float:left;
}

into your CSS to remove those mysterious gaps!

PS: Add

Code:

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/Ima...ysterious_Gaps

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