Make a td the same in Firefox/IE/Chrome - html

Question

I've got a table where I've given each of the <td>s some styling to have a background color, etc. They also have different amounts of data in them. Specifically, I have two <td>s next to each other, and one has content in it that makes it taller than the other. In Chrome, the shorter <td> is the same height as the taller <td>, with styling and everything. In Firefox/IE, the shorter <td> just takes up as much room as needed. I've tried giving the <td> height: 100%, but that didn't really do anything. I also tried having a div inside the td with height: 100%, but that didn't do anything, either.
How can I get it to behave the same across all three browsers? I don't necessarily need it to be either way, although it would be nice to actually be able to control it. I mostly just need it to behave the same.
Here's the final html. It might be kind of hard to understand because there's a lot of knockout stuff in there.
<div class="container">
<div class="inner-container">
<table>
<tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr>
<tr>
<td id="template" class="outer-div">
<h6>Templates</h6>
<ol class="journalTree sortable template manageJournal ui-sortable" >
<li class="group mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest mine template">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
<!--</div>-->
</td>
<td id="myJournal" class="outer-div droppable ui-droppable">
<!--<div id="myJournal" class="outer-div droppable ui-droppable">-->
<h6>My Journal</h6>
<ol class="journalTree sortable myJournal manageJournal ui-sortable">
<li class="group mine ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol >
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span>
</li>
</ol>
</li>
<li class="group deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Group</span>
<input type="text" style="display:none" class="itemTextBox"></div>
<ol>
<li class="no-nest deleted ">
<div>
<span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>
</ol>
</li>
</ol>
<!--</div>-->
</td>
</tr>
<tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr>
</tbody></table></div></div>
​
I can't set the height to a specific height, because the height of the right table changes dynamically (by adding more things to it). Here's the relevant CSS:
#myJournal
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 650px;
height: 100%;
border-radius: 25px;
-moz-border-radius: 25px;
}
#template
{
border: 1px solid black;
display: inline-block;
vertical-align: top;
background-color: #dde5e4;
width: 500px;
height: 100%;
margin-right: 100px;
border-radius: 25px;
-moz-border-radius: 25px;
}

Answer 1

Avoid setting any inline attributes and use CSS to style your tables instead. Try setting the cell width using CSS. You could do something like this (ideally you want your CSS in a separate file, but just to illustrate):
<style type="text/css">
table#myTable td {
height: 200px;
width: 200px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td>My data</td>
</tr>
</tbody>
</table>
If you want different sizes, create separate classes and apply them to your cells:
<style type="text/css">
td.small-cell {
width: 100px;
}
</style>
<table id="myTable">
<tbody>
<tr>
<td class="small-cell">My data</td>
</tr>
</tbody>
</table>
Finally, if you are starting a project, you might want to save yourself some time and use a CSS framework, like Twitter Bootstrap, that will sort out browser inconsistencies for you.