CSS problem

[nero120]

Hi guys,

I'm having a problem with table cell background images in Firefox (the problem does not occur in IE). Basically, I am getting gaps between the images when they should be flush as they are in IE. The page is validated XHTML 1.0 strict and the CSS is also validated so its probably some random property im missing.

The page is here: http://www.kenjiro.co.uk/new/

You can see the black gaps between the top logo and the bottom of the 'J'. It also occurs all the way down the page where images are set as backgrounds to table cells (as opposed to being an img tag contained by the cell).

If someone could solve this for me I would greatly appreciate it!

 

[nero120]

Okay, Ive done some investigation and found that the problem is being caused by small gaps at the bottom of images contained in cells - this is causing the cells below to be pushed down slightly, causing the break in the images.

The break at the bottom of the 'J' in 'Kenjiro' is caused by the myspace image on the right - there is a small gap under it pushing the cells below down.

As I said before, this is only happening in firefox and not in IE, so the problem must exist somewhere in the CSS.

Here is my style sheet for you perusal:

body {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #303030;
}
table {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
td {
	text-align: left;
	vertical-align: top;
	border: none;
}
a {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 1px dashed #FFFFFF;
}
a:hover {
	border-bottom: 1px solid #FFFFFF;
}
img {
	border: none;
}
.mainTable {
	background-color: #000000;
	border: 1px solid #FFFFFF;
	width: 800px;
	margin-left:auto;
	margin-right:auto;
	text-align: center;
}
.content {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: left;
	vertical-align: top;
	overflow: auto;
	padding: 0px 5px 10px 5px;
}
.gigsLink {
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	vertical-align: top;
	padding: 0px 5px 0px 5px;
}
a.imgLink, a:hover.imgLink {
	border: none;
}
.userTextArea {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #151616;
	border: solid #FFFFFF 1px;
	padding: 3px 3px 0px 3px;
	height: 15px;
}
.button {
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background-color: #333333;
	border: solid #FFFFFF 1px;
	padding: 1px 4px 0px 3px;
	height: 20px;
}

Could someone please help me?

 

[nero120]

Fixed it.