display:block not working properly in IE9

IE either needs to get their act together or get ditched. I'm so tried of making workarounds for just one browser. Ugh! Anyhow, now that I've vented my frustrations...

Last week I made a post stating that I was receiving gaps between my "<tr>"s. I was referred to another posted that suggested I use display:block to fix the problem. And it did.

Per the request of client though, I had to re-size the entire design and ultimately recreate the entire website. In doing so, I made sure to use the display:block code.

Everything looks fine in all browsers... except for IE9. I have cellpadding=0, cellspacing=0 in the <table> attribute itself, I also have display: block; border-spacing: 0px; border-collapse: collapse; in the ID of the table and still, in IE I have gaps between each of my table rows (<tr>).

What gives... any ideas? The table in question is the main table, #ghm.

This is the HTML code of the website (please don't tell me I shouldn't use tables in layouts. I am aware of this, but not yet proficient enough in tableless designs- so for now tables will have to do):

<body>

<table id="ghm" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="ghm_header-left" rowspan="7" valign="top"><img src="images/ghm_header-left.png" /></td>
<td id="ghm_header-middle"><img src="images/ghm_header-middle.png" /></td>
<td id="ghm_header-right" rowspan="7" valign="top"><img src="images/ghm_header-right.png" /></td>
</tr>
<tr>
<td id="ghm_nav"><?php include("ghm_nav.php"); ?></td>
</tr>
<tr>
<td><img src="images/ghm_header-bottom.png" /></td>
</tr>

<tr>
<td id="ghm_scroller"><img src="images/ghm_scroller.png" /></td>
</tr>
<tr>
<td id="ghm_main-body">
<!-- 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">
<center><table id="ghm_footer-sponsors">
<tr>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_yanmar">example</a></td>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_yamaha">example</a></td>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_westerbeke">example</a></td>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_volvo-penta">example</a></td>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_mercury-mercruiser">example</a></td>
<td><a href="http://www.example.com" class="ghm_footer-sponsors-links_cummins-tech">example</a></td>
</tr>
</table></center>
</td>
</tr>
</table>
<div id="ghm_footer-info">
&copy; 2012 example.com, All Rights Reserved
<p /><br />
<a href="index.php">Home</a> | <a href="index.php?page=ghm_general-information">General Information</a> | <a href="index.php?page=ghm_service">Service</a> | <a href="index.php?page=ghm_dockage">Dockage</a> | <a href="index.php?page=ghm_storage">Storage</a> | <a href="index.php?page=ghm_ships-store">Ships Store</a> | <a href="index.php?page=ghm_specials">Specials</a> | <a href="index.php?page=ghm_about-us">About Us</a> | <a href="index.php?page=ghm_contact-us">Contact Us</a>
</div>
</body>
</html>

Website CSS:
[code]body {
margin-top: 10px;
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 {
border: 0px;
display: block;
}

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

#ghm {
width: 904px;
margin: auto;
text-align: center;
border-spacing: 0px;
border-collapse: collapse;
}

#ghm img {
border: 0px;
display: inline;
}

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

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

#ghm_header-left {
width: 66px;
height: 144px;
padding-top: 39px;
}

#ghm_header-middle {
width: 798px;
height: 159px;
vertical-align: text-top;
}

#ghm_header-right {
width: 40px;
height: 150px;
padding-top: 4px;
}

#ghm_nav {
width: 798px;
height: 20px;
vertical-align: text-top;
}

#ghm_nav-table {
width: 798px;
height: 20px;
border: 0px;
border-spacing: 0px;
border-collapse: collapse;
vertical-align: text-top;
}

.ghm_nav-home {
display: block;
width: 172px;
height: 20px;
background: url('images/ghm_nav-home.png') bottom;
text-indent: -99999px;
}

.ghm_nav-home:hover {
background-position: 0 0;
}

.ghm_nav-gen-info {
display: block;
width: 145px;
height: 20px;
background: url('images/ghm_nav-gen-info.png') bottom;
text-indent: -99999px;
}

.ghm_nav-gen-info:hover {
background-position: 0 0;
}

.ghm_nav-service {
display: block;
width: 53px;
height: 20px;
background: url('images/ghm_nav-service.png') bottom;
text-indent: -99999px;
}

.ghm_nav-service:hover {
background-position: 0 0;
}

.ghm_nav-dockage {
display: block;
width: 66px;
height: 20px;
background: url('images/ghm_nav-dockage.png') bottom;
text-indent: -99999px;
}

.ghm_nav-dockage:hover {
background-position: 0 0;
}

.ghm_nav-storage {
display: block;
width: 62px;
height: 20px;
background: url('images/ghm_nav-storage.png') bottom;
text-indent: -99999px;
}

.ghm_nav-storage:hover {
background-position: 0 0;
}

.ghm_nav-ships-store {
display: block;
width: 78px;
height: 20px;
background: url('images/ghm_nav-ships-store.png') bottom;
text-indent: -99999px;
}

.ghm_nav-ships-store:hover {
background-position: 0 0;
}

.ghm_nav-specials {
display: block;
width: 58px;
height: 20px;
background: url('images/ghm_nav-specials.png') bottom;
text-indent: -99999px;
}

.ghm_nav-specials:hover {
background-position: 0 0;
}

.ghm_nav-about-us {
display: block;
width: 69px;
height: 20px;
background: url('images/ghm_nav-about-us.png') bottom;
text-indent: -99999px;
}

.ghm_nav-about-us:hover {
background-position: 0 0;
}

.ghm_nav-contact-us {
display: block;
width: 95px;
height: 20px;
background: url('images/ghm_nav-contact-us.png') bottom;
text-indent: -99999px;
}

.ghm_nav-contact-us:hover {
background-position: 0 0;
}

#ghm_header-bottom {
width: 798px;
height: 9px;
vertical-align: text-top;
}

#ghm_scroller {
width: 798px;
height: 164px;
vertical-align: text-top;
}

#ghm_main-body {
width: 798px;
background: url(images/ghm_main-body-bg.png);
vertical-align: text-top;
color: #000;
padding: 15px 15px 50px 15px;
font-size: 15.5px;
}

#ghm_main-body-blocks {
width: 100%;
text-align: center;
padding-top: 25px;
}

#ghm_footer {
width: 798px;
}

#ghm_footer td {
padding: 25px 0px 0px 0px;
}

#ghm_footer-sponsors {
margin: 0px;
width: 798px;
border-spacing: 0px;
border-collapse: collapse;
margin: auto;
text-align: center;
}

#ghm_footer-sponsors td {
padding: 25px 0px 0px 0px;
}

.ghm_footer-sponsors-links_yanmar {
display: block;
width: 128px;
height: 59px;
background: url('images/ghm_footer-yanmar.png') bottom;
text-indent: -99999px;
}

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

.ghm_footer-sponsors-links_yamaha {
display: block;
width: 126px;
height: 59px;
background: url('images/ghm_footer-yamaha.png') bottom;
text-indent: -99999px;
}

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

.ghm_footer-sponsors-links_westerbeke {
display: block;
width: 128px;
height: 59px;
background: url('images/ghm_footer-westerbeke.png') bottom;
text-indent: -99999px;
}

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

.ghm_footer-sponsors-links_volvo-penta {
display: block;
width: 127px;
height: 59px;
background: url('images/ghm_footer-volvo-penta.png') bottom;
text-indent: -99999px;
}

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

.ghm_footer-sponsors-links_mercury-mercruiser {
display: block;
width: 127px;
height: 59px;
background: url('images/ghm_footer-mercury-mercruiser.png') bottom;
text-indent: -99999px;
}

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

.ghm_footer-sponsors-links_cummins-tech {
display: block;
width: 127px;
height: 59px;
background: url('images/ghm_footer-cummins-tech.png') bottom;
text-indent: -99999px;
}

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

#ghm_footer-info {
width: 100%;
text-align: center;
padding-top: 25px;
}

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

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

Any help is appreciated- thanks in advance. I searched the forums for similar problems and was unable to find anything.

[edited by: alt131 at 12:55 am (utc) on Jan 7, 2012]
[edit reason] Thread Tidy - Examplifying [/edit]

display:block not working properly in IE9

Spyce

Spyce

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week