homepage Welcome to WebmasterWorld Guest from 54.205.241.107
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Space between table cells in IE6
Fine in other browsers
Cienwen

5+ Year Member



 
Msg#: 4178830 posted 8:58 pm on Jul 29, 2010 (gmt 0)

Hello all,

I have to code this page to work in IE6 because that is the the standard browser in the company. I know IE6 is dead and buried but I am stuck with it for a while longer.

I am building this page using a table. It is a table with 8 rows. 2 of those rows are split into 2 cells.

My problem is with the cells. In IE6 there is a space between the 2 cells. The space is blank as the background images have shifted.

Does anyone have any idea what is happening?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vintage Tool Contest</title>
<style type="text/css">
<!--
#vintageTable {
margin: 0 auto;
text-align: center;
padding: 0;
}
td {
text-align:left;
background-repeat:no-repeat;
background-position:left;
}
#questionTD {
background-image:url(images/promotion/vintage/bg/background-good-sm_09.jpg);
}
.leftOverride {
text-align: center;
}
.navigation {
padding: 10px 0 0 0;
font-size:16px;
font-family:"Courier New", Courier, monospace;
font-weight: bold;
}
.navigation a, .navigation a:hover {
padding: 10px 0 0 0;
font-size:16px;
font-family:"Courier New", Courier, monospace;
font-weight: bold;
color:#42341e;
}
.navigation a:hover {
text-decoration:none;
}
.p1 {
font-family:"Courier New", Courier, monospace;
font-size:15px;
font-weight: bold;
padding: 0 60px 0 60px;
}
.p2 {
font-family:"Courier New", Courier, monospace;
font-size:24px;
font-weight: bold;
padding: 0 0px 0 px;
}
.p3 {
font-family:"Courier New", Courier, monospace;
font-size:20px;
font-weight: bold;
padding: 0 0px 0 0px;
}
.p4 {
font-family:"Courier New", Courier, monospace;
font-size:16px;
font-weight: bold;
padding: 0 0px 0 0px;
}
-->
</style>
</head>
<body>
<div style="height:100%; width:100%; background-color:#ababab; background-image:url(images/promotion/vintage/bg/factory-parade.jpg); background-position:top center; background-repeat:no-repeat; margin:0; padding:0;">
<div style="padding:50px;">
<table id="vintageTable" width="817" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="101" colspan="3" align="center" valign="top" background="images/promotion/vintage/bg/background-good-sm_03.jpg" class="leftOverride"><img style="padding:18px 0 0 0;" src="images/promotion/vintage/logo.gif" alt="Tools Vintage Tools Contest" width="198" height="55"></td>
</tr>
<tr>
<td height="61" colspan="3" align="center" valign="top" background="images/promotion/vintage/bg/background-good-sm_05.jpg" class="leftOverride"><img src="images/promotion/vintage/title.gif" alt="Vintage Tool Contest" width="686" height="53"></td>
</tr>
<tr>
<td height="64" colspan="3" align="center" valign="top" background="images/promotion/vintage/bg/background-good-sm_06.jpg" class="leftOverride"><p class="navigation"><a href="#">This Week's Tool</a> | <a href="#">Previous Tools</a> | <a href="default.asp?TYPE=STATIC&PAGE=vintage-contest.htm">Enter Now</a> | <a href="#">Rules</a> | <a href="#">Privacy Policy</a></p></td>
</tr>
<tr>
<td height="101" colspan="3" valign="top" background="images/promotion/vintage/bg/background-good-sm_07.jpg"><p class="p1">We have gone deep into the Stanley Antique Tool Museum and pulled a few gems from our collection. Take a look at the tool, answer the question, fill in the form and you will be entered for a chance to win a new Stanley Tool.</p></td>
</tr>
<tr>
<td height="353" colspan="2" valign="top" background="images/promotion/vintage/bg/background-good-sm_08.jpg" style="margin:0; padding:0; background-image:url(images/promotion/vintage/week1-tool_08.jpg); background-repeat:repeat-x;"><img src="images/promotion/vintage/week1-tool_08.jpg" alt="Week 1 Antique Tool" width="465" height="353" style="display: block; margin:0; padding:0;" /></td>
<td id="questionTD" width="352" valign="top" style="margin:0;"><p class="p3">Week 1</p>
<p class="p2">Question:
<br>
How many
<br>
interchangeable<br>
cutters did this Combination Plane <br>
feature?</p>
<p class="p2"><a href="default.asp?TYPE=STATIC&PAGE=vintage-contest.htm"><img src="images/promotion/vintage/enter-now.gif" alt="Enter Now" width="225" height="59" border="0" /></a></p></td>
</td>
</tr>
<tr>
<td height="188" colspan="3" valign="middle" background="images/promotion/vintage/bg/background-good-sm_10.jpg"><p class="p1">A Little Bit About the Tool</p>
<p class="p1">-- Combination Plane</p>
<p class="p1">This is a self-contained planing mill.</p></td>
</tr>
<tr>
<td height="18" colspan="3" valign="top"><img src="images/promotion/vintage/bg/background-good-sm_11.jpg" width="817" height="18"></td>
</tr>
<tr>
<td width="360" height="200" valign="top" background="images/promotion/vintage/bg/background-good-sm_12.jpg">
<div style="padding:25px 0 0 58px;">
<p>
</p>

</div> </td>
<td colspan="2" valign="top" background="images/promotion/vintage/bg/background-good-sm_13.jpg">
<div style="padding:0px 0 0 0px;">
</div> </td>
</tr>
<tr>
<td height="1"></td>
<td width="105"></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>

 

Major_Payne



 
Msg#: 4178830 posted 9:34 pm on Jul 29, 2010 (gmt 0)

Might help:

Images, Tables, and Mysterious Gaps:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

Try validating CSS and HTML:

[jigsaw.w3.org...]
[validator.w3.org...]

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4178830 posted 10:05 pm on Jul 29, 2010 (gmt 0)

inline images (not background ones) could well be the issue..

as a quick fix, try
td img {display: block;}

if that works it should be fine leave as a blanket rule unless you actually want of any your image to display inline with text beside it, if you do try
td img {display: inline-block;}

just a guess as even with that code it's not apparent..

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.
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