Firefox Explodes When I Put Height To 100% Whats up with that?

[elaks 0]

<table width="100%" height="100%" cellspacing="0" cellpadding="0"><tr><td><table width="100%" background="/images/bg.gif" cellspacing=0><tr><td width="100% BACKGROUND="/images/bg.gif"></td><td valign="right"><img src="/images/greyhound.gif"></td></tr></table><table height="100%" width="100%" cellspacing=0><tr height="100%" width="100%" bgcolor="#ff0000"><td bgcolor="#cccccc" width="150" valign="top"></td><td bgcolor="#ffffff" valign="top"></td><td width='150' bgcolor='#cccccc' valign='top'></td></tr></table></td></tr></table>

Okay, this is the very basic design of my site, I've taken all the content out. Also- if it is my fault when it comes to coding, cut me slack; I haven't been using HTML for about a year.

So here's the problem:

When I put this code up, it works perfectly in IE 7 (Weirdly). I've set the page to have no margins, so all the tables touch the page borders. However; in firefox a white space is left underneath the table that stretches the page.
Check out the site here: MA PAGE
Please help me find the problem as I would prefer users to use Firefox.

[jlhaslip 4]

Just had a quick look using the web Dev Ext and Firebug in Firefox.

Seems there are a couple of things going wrong there, the first of which is the missing Doc Type Declaration. In order to have the Browsers rendering any place close to the same, you should be using a valid Doc Type.
Additionally, you are using IE Proprietary codes, so Firefox is probably not rendering them as per the IE version for the simple fact that it does not understand them.

Here are the Warnings the HTML Tidy supplies for your page:

Result: 0 errors / 13 warningsline 1 column 1 - Warning: missing <!DOCTYPE> declarationline 9 column 141 - Warning: <td> attribute with missing trailing quote markline 9 column 1 - Warning: <table> proprietary attribute "height"line 9 column 1 - Warning: <table> lacks "summary" attributeline 9 column 75 - Warning: <table> proprietary attribute "background"line 9 column 75 - Warning: <table> lacks "summary" attributeline 9 column 141 - Warning: <td> attribute "width" has invalid value "100% BACKGROUND="line 9 column 190 - Warning: <td> attribute "valign" has invalid value "right"line 9 column 209 - Warning: <img> lacks "alt" attributeline 10 column 1 - Warning: <table> proprietary attribute "height"line 10 column 1 - Warning: <table> lacks "summary" attributeline 10 column 49 - Warning: <tr> proprietary attribute "height"line 10 column 49 - Warning: <tr> proprietary attribute "width"Info: Document content looks like HTML Proprietary

I suggest you head over to the w3schools.com and check out their Tutorials on Tables if you insist on using them. Otherwise, drops the Tables and use Div based layouts. In my humble opinion, you are, or soon will be, glad to not have tables for the structural layout of your page. CSS is the way to go.

Example of a div/css page that is similar to yours : http://forums.xisto.com/no_longer_exists/

[elaks 0]

Thanks for that. I'm a changed man- I've been looking into alot of new stuff actually and I'm rekindeling my love of HTML. I'll definatley venture into Div tags.

[Saint_Michael 3]

Another thing I would like to add is that you need to fix your %'s, because a fluid design isn't suppose to show the left to right scroll bar. You have to remember if a 3 column layout your 3 columns need to equal 100%.

#left {background: #cacaca;border-top: 1px dashed;padding-left: 5px;width: 25%;height: 600px;left: 0px;top: 130px;position: absolute;}#content {background: #ffffff;border-top: 1px dashed;width: 50%;height: 600px;left: 150px;top: 130px;position: absolute;}#right {background: #cacaca;border-top: 1px dashed;border-right: 1px dashed;padding-left: 5px;top: 130px;left: 950px;width: 25%;height: 600px;position: absolute;}

it would look something like that, but if your going with the fixed design you need to have it equal 800px so it will be able to display correctly in the few people who still use a 640x800 resolution.

This website here is a good source of CSS info that covers pretty much everything including layout designs http://www.alvit.de/handbook/.