00arrow
14 Oct 2008, 08:53 AM
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:
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;
}
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:
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;
}