homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
display:block not working properly in IE9
Spyce




msg:4404555
 6:34 pm on Jan 6, 2012 (gmt 0)

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]

 

Spyce




msg:4404556
 6:39 pm on Jan 6, 2012 (gmt 0)

Nevermind. Of course, it's only AFTER I finally give up that I find the problem. I was using an incorrect doctype. Problem has been resolved!

alt131




msg:4404674
 1:00 am on Jan 7, 2012 (gmt 0)

Spyce, good to see you back, and thanks for posting the solution.

It can't be said often enough really - doctype makes a difference!

Global Options:
 top home search open messages active posts  
 

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