homepage Welcome to WebmasterWorld Guest from 54.204.182.118
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 / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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



 
Msg#: 4403028 posted 9:04 pm on Jan 2, 2012 (gmt 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>

 

penders

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



 
Msg#: 4403028 posted 10:48 pm on Jan 2, 2012 (gmt 0)

This problem has cropped up a few times recently...
Gap between table cells caused by inline images [webmasterworld.com]

Spyce



 
Msg#: 4403028 posted 8:10 pm on Jan 3, 2012 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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