strange effect with background colour in firefox

petermidi · Jan 22, 2007

Hi there,
This has me baffled and I'd really appreciate some help.
My table is set up to have no borders/margins/padding.
And displays perfectly in IE.
However, as I have some background colour in some cells I can see that when the site resolves in Firefox/netscape, firefox is making the cells seem 'bigger' - in other words the background colour spills around the side of the logo in the same cell.
Is there an easy workaround for this.
Can I tell firefox to leave the cell as it is and not add padding/borders etc?
Thanks so much,
Peter

traingamer · Jan 22, 2007

How are you setting the table to

...no borders/margins/padding

?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

petermidi · Jan 22, 2007

Thank you for helping with this.

I've stripped down the code for the page to show the issue:
And put the css code below
Thanks so much for having a look!
Peter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml"

xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css"></style>
</head>
<body>

<div id="container">
<table width="790" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="images/spacer.gif" width="10" height="8" /></td>
<td width="128"> </td>
<td width="258"> </td>
<td width="242"> </td>
<td width="28"><img src="images/spacer.gif" width="28" height="1" /></td>
<td width="40"><img src="images/spacer.gif" width="40" height="8" /></td>
<td width="8"><img src="images/spacer.gif" width="8" height="1" /></td>
<td width="46"><img src="images/spacer.gif" width="46" height="1" /></td>
<td width="30"><img src="images/spacer.gif" width="30" height="1" /></td>
</tr>
<tr>
<td colspan="4"><img src="images/testimage.jpg" width="638" height="86" /></td>
<td bgcolor="#FFFFFF" border="0"> </td>
<td></td>
<td> </td>
<td></td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="7"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="5"> </td>
<td> </td>
</tr>
</table>

</div>
</body>
</html>

AND the css.css

body {
background-color:#666;
padding:0px 0px 0px 0px;
border: 0px;
margin:0px;
font-family: Helvetica, Arial, sans-serif
}

#container {
background-image: url(../images/8a.jpg);
background-position: left top;
padding: 0px 0px 0px 0px;
margin:0px;
position: absolute;
z-index:1;
top: 30px;
left: 10%;
width: 790px;
border: solid 8px #fff
}

petermidi · Jan 22, 2007

OK...I have the answer thank you.
It's as simple as adding
td img {
display: block;
}

to the css sheet.

There's an article here:

http://developer.mozilla.org/en/docs...ysterious_Gaps

Thank you again
Peter

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

strange effect with background colour in firefox

petermidi

Technical User

traingamer

Programmer

petermidi

Technical User

petermidi

Technical User

Similar threads

Part and Inventory Search

Sponsor