Hello,

I'm creating a simple layout to display an event calendar.

I defined a height of 18px for TR but for same reason rows in FF3 are 1px shorter but appear fine in IE7.

I'm using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and the page validates HTML and CSS.

Thanks for any help.
Cheers.

Here is my css:

Code:
td {
	font-size: 8pt;
	font-family: Arial, Helvetica, sans-serif; 
}

table.calendar {
	border-width: 0px;
	border-collapse: collapse;
	background-color: white;
}

table.calendar tr {
	height: 18px;
}
	
table.calendar td {
	background-color: #e3e6e8;
	color: #505962;
	border-width: 1px;
	border-style: solid;
	border-color: white;
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
}
table.calendar td.tdMonth {
	background: #505962;
	color: #ffffff;
	font-weight: bold;
}
table.calendar td.tdWeek {
	background: #c7ccd1;
	color: #ffffff; 
	font-weight: bold;
	width: 18px;
}
table.calendar td.researchEvent {
	background: #66b4ff;
	color: #ffffff;
}
table.calendar td.outreachEvent {
	background: #f59a2b; 
	color: #ffffff;
}