homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
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:4403030
 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




msg:4403048
 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:4403275
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved