Please help with tables
Hi there. I've just finished redesigning my website, but I've run across a problem and I just can't seem to root out the source. The problem is that if the content does not go beyond the available screen space, the table doesn't fill the whole screen. It's weird because it used to work, although the scroll bar always appeared and the table went over the available screen space. Things changed when I went to validate my HTML, I cleaned up some of the code and then things went awry.
Example of the "short" table: lxmx.net
Example of everything working (even though the code is wrong): lxmx.net
When I had 'height="100%"' on the table, things were fine except for the screen overflow. Now, 'height="100%"' seems to have no affect.
Any help would be appreciated!
timjpriebe posted this at 14:30 — 14th April 2005.
He has: 2,667 posts
Joined: Dec 2004
What's your screen resolution set at? Mine is at 1024x768, and those both look fine to me.
andy206uk posted this at 15:55 — 14th April 2005.
He has: 1,758 posts
Joined: Jul 2002
Have you added a doctype?
The reason is simple. height="100%" shouldn't fill the viewport (browser window) it should fill the element which is only physically as high as the content within it.
By adding a doctype you will have told the browser to render in standards mode which behaves as I described above. Not having a doctype means the browser renders in "quirks mode" which lets you get away with strange stuff and one of those strange things is 100% being 100% of the viewport.
Why do you need the table to be 100% high? If it's so you can achieve the white portion in the middle, simply use a y-repeating, center aligned background image of the white section and set the background colour to orange.
I hope that wasn't all too confusing.
Andy
Lxmx posted this at 16:01 — 14th April 2005.
They have: 5 posts
Joined: Apr 2005
Yeah, adding a Doctype is what changed it. It's now completely XHTML compliant but a new problem has arisen. I think I get what you mean about the y-repeating background. I'll go give it a shot.
Thanks!
Lxmx posted this at 16:46 — 14th April 2005.
They have: 5 posts
Joined: Apr 2005
Wow, how did this happen. Click the link to see. I wonder how it got aligned like that? Any ideas? Once again, I'm stumped.
Roo posted this at 22:38 — 14th April 2005.
She has: 840 posts
Joined: Apr 1999
put align="center" in your table tag. BTW this has really bad horizontal scroll at 800 X 600.
Lxmx posted this at 01:43 — 15th April 2005.
They have: 5 posts
Joined: Apr 2005
Yeah, I've tried going margin-right: auto, margin-left:auto in the CSS, which didn't align it properly. I've also tried align="center" in the table, which still leaves everything misaligned.
andy206uk found what should be a workaround, however I ran into some snags:
The problem with being "short" only arose after I put the document in Standards mode. To try and work around the problem, I made a background with the white image and put it on repeat-y. Now that should work, but nothing is aligned, regardless of whether I center the tables using CSS (margin-right:auto etc) or even if I do it in the table (align="center").
At first glance to me it seemed as if I had accidentally put in a margin value in one of my CSS classes, this doesn't seem to be the case. I then also checked the measurements and it seems that the background image is perfectly centered while the tables are a few pixels off.
So, the new question is, what can I do to get those tables to line up with the background? Click here to see the problem . Is there any way I can compensate for the discrepancy or even better, eliminate the problem altogether?
Lxmx posted this at 05:31 — 15th April 2005.
They have: 5 posts
Joined: Apr 2005
Looks like I got a solution! Bump the table right and it worked. Thanks for the help guys.
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.