Jump to content
xisto Community
Sign in to follow this  
elaks

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

Recommended Posts

<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.

Share this post


Link to post
Share on other sites

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. :P 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/

Share this post


Link to post
Share on other sites

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. :P

Share this post


Link to post
Share on other sites

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/.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.