Layout differences between Firefox and Chrome

Question

I'm laying out a tabbed UI on the side of a webpage, and I've done the whole thing using percentage values for height/width of tables, divs, and trs.

In Chrome the page looks correct, but in firefox, a certain table seems unaffected by the setting for its height and extends off of the page.

What could be happening here?

---

Update: I know, posting code helps I just didnt' know how much help it would be in this case.

var msgStr = 'div style="height:98%; background-color: #FFFFFF; border-width:1px;border-color:#000000; border-style:solid;"';

// Page Header
msgStr += 'table align="center";    
msgStr += 'tr td align="center"';
msgStr += 'h2 i Vehicle font color="FF0000"' + curVehicle  + '/font Messaging Log: /i /h2';
msgStr += '/td /tr /table';

// Message Box
msgStr += 'table id="msgTable" height="85%" width="100%"';

This table (msgTable) seems unaffected by changing its height value in Firefox, and stretches off the page

Answer 1

Gecko Vs WebKit, if you want to post some code maybe we can help. I prefer to use actual values pulled from available space rather than percentages.

Answer 2

Let javascript help you instead of setting a percentage height. Get the viewport size using JS, multiply it with the preferred height (eg. 0.85 for 85% height) and then apply the value to the elements heights.