table height not working in IE

[NorthStarDA]

i have 2 tables that whos heights are too high based on the values in CSS. the first one is about 3 pixels too tall and the second seems to have an extra line in it.

CSS 1

.menubar {
	background-color: #D8D5CD;
	border: 1px solid #999999;
	padding: 0px;
	height: 40px;
}

Table 1

<table width="100%" cellpadding="0" cellspacing="0" class="menubar">
<tr>
<td width="63">
<a href="agenda.cfm"><img src="images/menu_agenda_off.gif" width="63" height="40" border="0"></a>
</td>

<td width="68">
<a href="calendar.cfm"><img src="images/menu_calendar_off.gif" width="68" height="40" border="0"></a>
</td>
<td>&nbsp;
</td>
</tr>
</table>

This table should be 40px high, it appears there are 2 pixels under the images in the <tr>
---------------------------------------
CSS 2

.page-header {
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	color: #333333;
	font-family: Verdana, Arial, Helvetica, sans-serif;

Table 2

<table width="100%"  border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="2"><img src="../images/spacer.gif" alt="" width="1" height="5"></td></tr>
[b]
<tr><td class="page-header"><h1>Agenda</h1></td><td align="right" class="page-header"><h2>Name</h2></td></tr>
[/b]
<tr><td colspan="2"><img src="../images/spacer.gif" alt="" width="1" height="10"></td></tr>
</table>

the second row looks like it has an extra line break when viewed in IE, in mozilla it looks fine

i appreciate any help


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[NorthStarDA]

nevermind about the second table, i found out it was the <h1> and <h2> tags.

anyone know how to setup a <h1> tag like this

.page-header h1 {
font-size:16px;
}
.page-header h2 {
font-size:12px
}

but so that it doesn't put in the break?


=========================================
I have not failed. I've just found 10,000 ways that won't work.
Thomas A. Edison

 

[Vragabond]

Problem 1: Whitespace.
Browsers sometimes wrongly interpret whitespace with inline elements (such as images). By putting your <td></td> in a single line with no spaces your problems should go away:

<tr>
<td width="63"><a href="agenda.cfm"><img src="images/menu_agenda_off.gif" width="63" height="40" border="0"></a></td>
<td width="68"><a href="calendar.cfm"><img src="images/menu_calendar_off.gif" width="68" height="40" border="0"></a></td>
<td>&nbsp;</td>
</tr>

Problem 2: Heading margins.
By default, heading tags in html have margins to separate them from the rest of the text. You can switch off margins using css. That should remove the problem:

.page-header h1 {
	font-size: 16px;
	margin: 0;
}
.page-header h2 {
	font-size: 12px;
	margin: 0;
}

Hope it helps.