table cells not aligning

Hi yall,
I have an interesting problem. I have a html file with some example data, what i am aiming for is a table that has two td cells. Each cell will have another table. I want both of the two tables to be shown as the same height, even in one may have less rows than the other (its rows should 'stretch' vertically so the tables line up evenly.
Here is the html :

This code provides the desired results. Here is my problem though! I have some styles I need for some items in my html that when added, 'break' this effect I am seeing. Here is the altered HTML that DOESN'T work :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<HEAD>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<style type="text/css">
body {
overflow-y:auto;
margin:0;
padding:0 10px 0 10px;
border:0;
height:100%;
background-color: #00CCFF;
}
.popupDiv
{
display:none;
position: fixed; 
top:300px; 
left:300px;

}
 
* html .popupDiv {position:absolute;}
 
</style>
 

 
</HEAD><body>
<table width='94%'>
 
  <tr><td height='100%'>
 
    <table style='border-collapse:collapse;
border:solid;
border-color:black;
border-width:thin;height:100%;width:100%'><tr  ><td>data 1</td><td>data 2</td></tr>
                      <tr  ><td>data 1</td><td>data 2</td></tr></table>
 
    </td><td height='100%'>
 
     <table style='border-collapse:collapse;
border:solid;
border-color:black;
border-width:thin;height:100%;width=100%'><tr  ><td>data 1</td><td>data 2</td></tr>
<tr  ><td>data 1</td><td>data 2</td></tr>
<tr  ><td>data 1</td><td>data 2</td></tr></table>
 
    </td></tr></table>
</body>    
</html>

I am kind of lost on why this is breaking, I got the styles from a graphics person who was changing the look-and-feel of the web app.

Thanks if this is something obvious to someone!!!
Kim

By having the DOCTYPE declaration, the page gets 'broken'.
[ October 15, 2007: Message edited by: Dan Drillich ]

Adding a DOCTYPE doesn't "break" anything; it switches the browser out of quirks mode into standards mode. The way various CSS rules are applied will be different, but neither one can be considered "broken".
[ October 15, 2007: Message edited by: Bear Bibeault ]

Wow, thank you so much. I removed that line and viola! Fixed.
Now just have to go ask the graphic guy why he put it there in the first place . . .

Thanks Again!!!

Probably to fix other issues which could be re-introduced by removing the DOCTYPE. It really depends upon what conventions are set up for your app. Some shops like to use all quirks mode pages, and some standards-mode pages. You really ought to settle as a group on which one to use and make sure all pages render correctly. Simply adding or removing the DOCTYPE willy-nilly is guaranteed to be a recipe for disaster.

Dang, I liked 'willy-nilly' but alas you were right. My removing that line broke other things on the page.

This is a tricky situation because we have three differant people working on the same jsp, oy!

Looks like time for me to start reading up on xhtml . . .

Thanks again for all the help.

quirksmode.org is a good resource.