Welcome to WebmasterWorld Guest from 54.196.217.43

Forum Moderators: incrediBILL

Message Too Old, No Replies

Spacing between "<tr>". can't get rid of it.

     
9:04 pm on Jan 2, 2012 (gmt 0)

New User

5+ Year Member

joined:Aug 18, 2010
posts: 31
votes: 0


Hello- I'm designing a website for a client and I can't seem to figure out what is causing the spacing between <tr>'s to show up. Now, I know better than to use tables for layout, so please do not tell me I shouldn't be using them. I have not yet been able to master tableless layouts, so until I am able to do so, tables will have to do.

Everything on the page looks absolutely perfect except for the spacing between each <tr>. I've tried playing with cellpadding and cellspacing in the table tag, I've even tried playing with border-spacing and border-collapse within the CSS/ID of the table. I've tried playing with padding, margins... the whole "shebang".. I still cannot get this spacing to disappear. Any thoughts?

Anyhow, this is my code:

CSS:
body {
margin: 0px;
padding: 0px;
background: #00504f url(images/ghm_marina-bg.jpg);
background-repeat: no-repeat;
font-family: Arial, Tahoma, Verdana, sans-serif;
font-size: 14px;
color: #ccc;
}

img, table, tr, td {
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

#ghm_container {
margin: auto;
width: 1217px;
}

#ghm_container a, a:visited, a:active {
color: #ccc;
text-decoration: underline;
}

#ghm_container a:hover {
color: #999;
text-decoration: underline;
}

#ghm_header-left {
padding-top: 50px;
width: 90px;
}

#ghm_header-middle {
width: 1073px;
}

#ghm_header-right {
padding-top: 5px;
width: 54px;
}

#ghm_navigation, #ghm-nav_table {
width: 1073px;
height: 26px;
}

.ghm-nav_home {
display: block;
width: 229px;
height: 26px;
background: url('images/ghm_home.png') bottom;
text-indent: -99999px;
}

.ghm-nav_home:hover {
background-position: 0 0;
}

.ghm-nav_gen-info {
display: block;
width: 187px;
height: 26px;
background: url('images/ghm_gen-info.png') bottom;
text-indent: -99999px;
}

.ghm-nav_gen-info:hover {
background-position: 0 0;
}

.ghm-nav_service {
display: block;
width: 74px;
height: 26px;
background: url('images/ghm_service.png') bottom;
text-indent: -99999px;
}

.ghm-nav_service:hover {
background-position: 0 0;
}

.ghm-nav_dockage {
display: block;
width: 90px;
height: 26px;
background: url('images/ghm_dockage.png') bottom;
text-indent: -99999px;
}

.ghm-nav_dockage:hover {
background-position: 0 0;
}

.ghm-nav_storage {
display: block;
width: 83px;
height: 26px;
background: url('images/ghm_storage.png') bottom;
text-indent: -99999px;
}

.ghm-nav_storage:hover {
background-position: 0 0;
}

.ghm-nav_ships-store {
display: block;
width: 105px;
height: 26px;
background: url('images/ghm_ships-store.png') bottom;
text-indent: -99999px;
}

.ghm-nav_ships-store:hover {
background-position: 0 0;
}

.ghm-nav_specials {
display: block;
width: 80px;
height: 26px;
background: url('images/ghm_specials.png') bottom;
text-indent: -99999px;
}

.ghm-nav_specials:hover {
background-position: 0 0;
}

.ghm-nav_about-us {
display: block;
width: 92px;
height: 26px;
background: url('images/ghm_about-us.png') bottom;
text-indent: -99999px;
}

.ghm-nav_about-us:hover {
background-position: 0 0;
}

.ghm-nav_contact-us {
display: block;
width: 133px;
height: 26px;
background: url('images/ghm_contact-us.png') bottom;
text-indent: -99999px;
}

.ghm-nav_contact-us:hover {
background-position: 0 0;
}

#ghm_logo-bottom {
width: 1073px;
}

#ghm_scroller {
width: 1073px;
}

#ghm_main-body {
width: 1073px;
background: url(images/ghm_body-bg.png);
background-repeat: repeat-y;
color: #000;
padding: 15px 35px 100px 35px;
}

#ghm_main-body a, a:visited, a:active {
color: #1e4872;
text-decoration: underline;
}

#ghm_main-body a:hover {
color: #5c8fae;
text-decoration: underline;
}

.ghm_main-body-blocks {
width: 1000px;
text-align: center;
padding-top: 100px;
}

#ghm_footer-sponsors {
width: 1073px;
padding-top: 25px;
}

#ghm-sponsors-links {
width: 1073px;
height: 79px;
}

.ghm-sponsors-links_yanmar {
display: block;
width: 175px;
height: 79px;
background: url('images/ghm_yanmar.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_yanmar:hover {
background-position: 0 0;
}

.ghm-sponsors-links_yamaha {
display: block;
width: 173px;
height: 79px;
background: url('images/ghm_yamaha.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_yamaha:hover {
background-position: 0 0;
}

.ghm-sponsors-links_westerbeke {
display: block;
width: 170px;
height: 79px;
background: url('images/ghm_westerbeke.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_westerbeke:hover {
background-position: 0 0;
}

.ghm-sponsors-links_volvo-penta {
display: block;
width: 170px;
height: 79px;
background: url('images/ghm_volvo-penta.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_volvo-penta:hover {
background-position: 0 0;
}

.ghm-sponsors-links_mercury-mercruiser {
display: block;
width: 170px;
height: 79px;
background: url('images/ghm_mercury-mercruiser.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_mercury-mercruiser:hover {
background-position: 0 0;
}

.ghm-sponsors-links_cummins-tech {
display: block;
width: 183px;
height: 79px;
background: url('images/ghm_cummins-tech.png') bottom;
text-indent: -99999px;
}

.ghm-sponsors-links_cummins-tech:hover {
background-position: 0 0;
}

#ghm_footer {
width: 1073px;
text-align: center;
padding-top: 35px;
font-size: 12px;
}


Index Page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<link rel=stylesheet href="ghm_style.css" type="text/css" media=screen>
</head>
<body>
<table border="0" id="ghm_container" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7" id="ghm_header-left" valign="top">
<a href="index.php"><img src="images/ghm_header-left.png" /></a>
</td>
<td id="ghm_header-middle" valign="top">
<a href="index.php"><img src="images/ghm_header-middle.png" /></a>
</td>
<td rowspan="7" id="ghm_header-right" valign="top">
<a href="index.php"><img src="images/ghm_header-right.png" /></a>
</td>
</tr>
<tr>
<td id="ghm_navigation" valign="top">
<?php include("ghm_nav.php"); ?>
</td>
</tr>
<tr>
<td id="ghm_logo-bottom" valign="top">
<img src="images/ghm_logo-bottom.png" />
</td>
</tr>
<tr>
<td id="ghm_scroller" valign="top">
<img src="images/scroller.png" />
</td>
</tr>
<tr>
<td id="ghm_main-body" valign="top">
<!-- The following PHP code allows for internal links (such as those in the nav bar) to open in this area of the page. This allows for faster loading pages and overall reduced bandwidth because the visitor is not having to load the header, navigation, footer, etc. every time they load a new page. -->
<?php
$page = $_GET['page'];
if ($page) {
$page = $page . '.php';
include($page);
}
else {
include('ghm_home.php');
}
?>
</td>
</tr>
<tr>
<td id="ghm_footer-sponsors" valign="top">
<table id="ghm-sponsors-links" cellpadding="0" cellspacing="0">
<tr>
<td width="180"><a href="http://www.yanmar.com" class="ghm-sponsors-links_yanmar">Yanmar</a></td>
<td width="178"><a href="http://www.yamaha.com" class="ghm-sponsors-links_yamaha">Yahama</a></td>
<td width="175"><a href="http://www.westerbeke.com" class="ghm-sponsors-links_westerbeke">Westerbeke</a></td>
<td width="175"><a href="http://www.volvo.com" class="ghm-sponsors-links_volvo-penta">Volvo-Penta</a></td>
<td width="175"><a href="http://www.mercury.com" class="ghm-sponsors-links_mercury-mercruiser">Mercury Mercruiser</a></td>
<td width="183"><a href="http://www.cummins.com" class="ghm-sponsors-links_cummins-tech">Cummins Technology</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="ghm_footer" valign="top">
&copy; 2012 GreenHarborMarina.com, All Rights Reserved
<p /><br />
<a href="index.html" target="self">Home</a> | <a href="index.php?page=ghm_general-information" target="self">General Information</a> | <a href="index.php?page=ghm_service" target="self">Service</a> | <a href="index.php?page=ghm_dockage" target="self">Dockage</a> | <a href="index.php?page=ghm_storage" target="self">Storage</a> | <a href="index.php?page=ghm_ships-store" target="self">Ships Store</a> | <a href="index.php?page=ghm_specials" target="self">Specials</a> | <a href="index.php?page=ghm_about-us" target="self">About Us</a> | <a href="index.php?page=ghm_contact-us" target="self">Contact Us</a>
</td>
</tr>

<table>
</body>
</html>
10:48 pm on Jan 2, 2012 (gmt 0)

Senior Member

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

joined:July 3, 2006
posts: 3123
votes: 0


This problem has cropped up a few times recently...
Gap between table cells caused by inline images [webmasterworld.com]
8:10 pm on Jan 3, 2012 (gmt 0)

New User

5+ Year Member

joined:Aug 18, 2010
posts: 31
votes: 0


Oh excellent! I wasn't sure what was wrong, so I didn't know what to search for. Thanks for sharing, my problem has been resolved by setting img { display: block; } in my CSS.