IE Rowspan Problem

IE is making the height of one row larger than it should

[rob7591]

Ok, This is kind of hard to explain, but I'll try it.

First off, here's the code I have:

<table id="header" cellspacing="0" border="1"> 
 <tbody> 
 <tr> 
 <!-- START CELL A --> 
 <td id="header-left" rowspan="2" valign="middle"> 
 <form method="get" action="search.php"> 
 <label for="q"><b>Search:</b> </label> 
 <input id="q" type="text" name="q" /> 
 <input type="image" src="search.gif" alt="Go" /> 
 </form> 
 </td> 
 <!-- START CELL B --> 
 <td id="header-mid" rowspan="2" /> 
 <!-- START CELL C --> 
 <td background="#009" height="23" valign="bottom"> 
 This CELL should be a smaller height than it is in IE. 
 </td> 
 </tr> 
 <tr> 
 <!-- START CELL D --> 
 <td id="header-right"> 
 You have # items in your cart. 
 </td> 
 </tr> 
 </tbody> 
</table> 

OK, now this is what I want it to look like

_______________ ___ 
¦``````````````¦```\_______CELL C____________ 
¦```CELL-A`````¦CELL ``` CELL D ``````````` ¦ 
¦______________¦_B__________________________¦ 

Notes:

Cell A & B are both rowspan=2

Cell A is centered vertically

Cell B has an image that curves down into the border beneath cell C

Cell C should be 23px in height.

Cell D should be the rest of the height of the row containing Cell A.

This is the problem:

Cell A's Content is taller in height than Cell C.
And for some reason, IE feels the need to make Cell C and Cell A the same height.

This is making cell C too tall which messes up the curve image and stops it from lining up.

(God this woulda been so much simpler with a link :o )

(OR an image)

I hope that explains it enough..

pretty much Cell C is the same height as Cell A, when Cell A should have no impact on Cell C's height, because it's rowspan="2".

[rocknbil]

What happens when you remove the form from cell A?

If that fixes it, try

<form method="get" action="search.php" id="searchForm">

.....

#searchForm { margin:0; padding:0; }

[tedster]

Does your mark-up validate? W3C Validator - HTML [validator.w3.org]

[rob7591]

Thanks for the replies.

I removed the form, and surprisingly, the cell stayed in the same place.

I tried setting the height of the cell to 1px and it still stayed in the same place.

I'm checking now to see if there's anyplace I can set margin-top and padding-top: 0px;

And yes, my page is valid XHTML loose.

[rob7591]

Well. I can make it work if I set the height of Cell D to the right measure, but I don't want to do that because that one's supposed to be fluid in height.