Tables. Never truly 100% height!

2003-04-28

I've got a table that is set to 100% height of the browser. Now howcome it doesn't display on the web as 100% height of the browser like its supposed to. No that'd make perfect sense otherwise wouldn't it?!

Can anyone help? I've tried going into code view in Dreamweaver and changing the page properties like topmargin"0".... and I've added bottommargin="0" but still nothing. Aaarrrghh.

It always leaves a little gap at the bottom. Please help. Then I'll be happy. Thank you.

They pretend to pay me so I pretend to work.

NewEzra · 2003-04-28 #2

This works fine for me:

Code:

<HTML>
<HEAD>
<TITLE>index</TITLE>
</HEAD>
<BODY bgcolor="#999999" topmargin="0" bottommargin="0">
<table width="740" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td width="740" valign="top" bgcolor="#000000">&nbsp;</td>
  </tr>
</table>
</BODY>
</HTML>

Nico · 2003-04-28 #3

Bluebox's code should work in most browsers, however the height attribute of the <table> tag is deprecated by the W3C and the use of it is discouraged.
The height attribute isn't displayed correctly in some browsers, like Netscape 6.x

I recommend the use of CCS to set the height.

cheers

Nico · 2003-04-28 #4

And this my sound stupid but make sure cellspace is set to 0, you'll never know

swinhoe · 2003-04-29 #5

could it be that the page margins were not set to 0 ????

just a thought...

as_clark20 · 2003-04-29 #6

I've set all margins to Zero, Cell Pad to Zero, Cell Space to Zero - everything I know that can be set to zero is. I dont get it. I still get this 10-15 pixel gap at the bottom which is really beginning to try my patience as it just doesn't look professional with a big gap at the bottom.

swinhoe · 2003-04-29 #7

u got a link for me to look at ?

trilogic · 2003-04-29 #8

you might have a space or even a paragraph after your table?

as_clark20 · 2003-04-29 #9

http://www.brakepart.co.uk/noflash.html

It seems to work when you go to it directly, try clicking the LEARN ABOUT FLASH link at the top too. On my browser (IE6) The white column doesn't extend all the way to the bottom, neither do the shadows at the sides. Please let me know if it works on anyother browsers.

x-zero-x · 2003-04-29 #10

it looked good in IE6 and Netscape 7 on XP pro..

But I've discovered that in IExplorer, when you set a table's height to 100% it indeed leaves a small space at the bottom and when you hit refresh it resizes to the full 100%.. I've had the same problem with a couple of designs I made..

as_clark20 · 2003-04-29 #11

Well atleast I know I'm not going mad then and that other have had the same problem. Anyway to combat it other than destroy the entire internet?!

trilogic · 2003-04-29 #12

looks good without gap on osx safari

swinhoe · 2003-04-29 #13

i couldnt see any issues,...

but then, ive not dealt with this myself firsthand...

*leaves the ball in x zero x 's court...*

Neurowave · 2003-04-29 #14

You can fix this issue by using CSS to force all your margins, padding, etc to zero. Used to drive me crazy a few years ago on a site I was working on

Code:

<style type="text/css">
<!--
Body {
	margin-top: 0px;
	margin-right: 0px; 
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px; 
	padding-bottom: 0px;
	padding-left: 0px; 
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
-->
</style>

Good luck!

abenson · 2003-04-29 #15

dude i looked into your HTML and you have an error in your body tag:

bottommargn="0"

change to

bottommargin="0"

x-zero-x · 2003-04-29 #16

abenson, I made a little test with all margins at '0' with the same problem.. check this out.. it shows a table scaled to 100%, but not displaying at 100%.. when I hit refresh it resizes to the full heigth..

edit: just found out something strange... when you follow the link it's actually the full height, but when you open a new browser en paste the URL into it, you'll see the problem.. !?

Neurowave · 2003-04-29 #17

x zero x, try what I posted... it'll fix it

as_clark20 · 2003-04-29 #18

Oh and thank you very much Abenson, I didn't notice my spelling error until you brought it up - thanks for checking out my source code dude! It seems to work fine on my browser now. Big sigh of relief. I'm sure I'll probably find away to cause havok later so I'll be back crying about some other problem. Damn me and my spelling and curse my brain!!

Big smiles everyone!

x-zero-x · 2003-04-29 #19

I know.. "bottommargin" isn't correct HTML, but I thought it was strange that when following a link it'll be displayed correct, but when entering the URL by hand it won't.. It also explaines why everyone in this thread doesn't see any problem at As_clark20's site (try pasting the url by hand into the adres-bar.. you'll see what I mean)..

to sum it up; yes, css will fix the problem

Nico · 2003-04-30 #20

Originally posted by x zero x
to sum it up; yes, css will fix the problem

That's what i said

mouthlock · 2003-04-30 #21

'| Had that problem a LONG time ago, didn't have forum buddies to help me out though just an HTML 4 manual *LMAO*

'| Glad it works now

swinhoe · 2003-04-30 #22

glad thats sorted....

its weird how it does that with the url....

good work fellas'...

colorblind · 2003-05-01 #23

Another guess would be:

scroll=auto; in your body TAG ... It looks a like the space at the bottom is to be reserved for a vertical scrollbar, which only leaves after you refresh (considering the browser then knows you don't need it ... !! ) ...

x-zero-x · 2003-05-02 #24

yeah, thought about the same thing.. but that still doesn't explain why it works when you follow a link and not when you enter the URL by hand..

colorblind · 2003-05-02 #25

Well, there is a difference in following a link and passing it by entering it by hand ... not exactly the same procedure for the browser I guess ...

x-zero-x · 2003-05-02 #26

hmm.. I guess what it could be is that when you follow a link the browser's height and width have already been stored somehow and are accessable to define the height and width in pixels from the 100%..
when you enter the URL by hand the browser probably doesn't have that info to use and thus doesn't know wether to display a scrollbar or not.. The browser waits untill the site has been fully loaded and does not display the scrollbar because the sites' width doesn't exceed the browsers' width.. but because the site has been built up with the browser reserving that space for the scrollbar it displays only the backgroundcolor.. (and thus not showing the table at a full 100%)

colorblind · 2003-05-02 #27

that would be my guess exaclty x zero x ... so setting the scroll-property on "auto" would help I guess .. !!

mls · 2003-05-30 #28

I can't tell you how many times I had come crossed that same problem. The last splash page I created for my site, had issues with there being a space from a width standpoint. I couldn't figure it out. I know this might sound crazy, but I used the rightmargin <tag> and seem to fix that problem. I did the same thing before I added that <tag> when refreshing the browser it seem to be 100%.

Azaloth · 2003-05-31 #29

As far as I know, this is a bug in certain version of IE6 that many people experience...and as posted earlier, CSS styling should fix the problem.

colorblind · 2003-06-04 #30

Also, there is a unknown HTML command for the <body> tag

Code:

scroll="auto"
// or
scroll="no"
// or
scroll="yes"

I have not yet tried to validate the command, but it works fine with IFrames as I've just used it for them today .. !!

x-zero-x · 2003-07-30 #31

*bump* for the people in the Front-End forum..

// Colorblind, have you validated it yet?

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Creative Software > Web • Tables. Never truly 100% height!


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	Nico	2003-04-28 #3
	Bluebox's code should work in most browsers, however the height attribute of the <table> tag is deprecated by the W3C and the use of it is discouraged. The height attribute isn't displayed correctly in some browsers, like Netscape 6.x I recommend the use of CCS to set the height. cheers

	Nico	2003-04-28 #4
	And this my sound stupid but make sure cellspace is set to 0, you'll never know

	swinhoe	2003-04-29 #5
	could it be that the page margins were not set to 0 ???? just a thought...

	as_clark20	2003-04-29 #6
	All Margins Set to Zero I've set all margins to Zero, Cell Pad to Zero, Cell Space to Zero - everything I know that can be set to zero is. I dont get it. I still get this 10-15 pixel gap at the bottom which is really beginning to try my patience as it just doesn't look professional with a big gap at the bottom.

	trilogic	2003-04-29 #8
	you might have a space or even a paragraph after your table?

	as_clark20	2003-04-29 #9
	http://www.brakepart.co.uk/noflash.html It seems to work when you go to it directly, try clicking the LEARN ABOUT FLASH link at the top too. On my browser (IE6) The white column doesn't extend all the way to the bottom, neither do the shadows at the sides. Please let me know if it works on anyother browsers.

	x-zero-x	2003-04-29 #10
	it looked good in IE6 and Netscape 7 on XP pro.. But I've discovered that in IExplorer, when you set a table's height to 100% it indeed leaves a small space at the bottom and when you hit refresh it resizes to the full 100%.. I've had the same problem with a couple of designs I made..

	as_clark20	2003-04-29 #11
	Well atleast I know I'm not going mad then and that other have had the same problem. Anyway to combat it other than destroy the entire internet?!

	swinhoe	2003-04-29 #13
	i couldnt see any issues,... but then, ive not dealt with this myself firsthand... leaves the ball in x zero x 's court...

	abenson	2003-04-29 #15
	dude i looked into your HTML and you have an error in your body tag: bottommargn="0" change to bottommargin="0"

	x-zero-x	2003-04-29 #16
	abenson, I made a little test with all margins at '0' with the same problem.. check this out.. it shows a table scaled to 100%, but not displaying at 100%.. when I hit refresh it resizes to the full heigth.. edit: just found out something strange... when you follow the link it's actually the full height, but when you open a new browser en paste the URL into it, you'll see the problem.. !?

	Neurowave	2003-04-29 #17
	x zero x, try what I posted... it'll fix it

	as_clark20	2003-04-29 #18
	Thanks guys and gals. Oh and thank you very much Abenson, I didn't notice my spelling error until you brought it up - thanks for checking out my source code dude! It seems to work fine on my browser now. Big sigh of relief. I'm sure I'll probably find away to cause havok later so I'll be back crying about some other problem. Damn me and my spelling and curse my brain!! Big smiles everyone!

	x-zero-x	2003-04-29 #19
	I know.. "bottommargin" isn't correct HTML, but I thought it was strange that when following a link it'll be displayed correct, but when entering the URL by hand it won't.. It also explaines why everyone in this thread doesn't see any problem at As_clark20's site (try pasting the url by hand into the adres-bar.. you'll see what I mean).. to sum it up; yes, css will fix the problem

	Nico	2003-04-30 #20
	Originally posted by x zero x to sum it up; yes, css will fix the problem That's what i said

	mouthlock	2003-04-30 #21
	'\| Had that problem a LONG time ago, didn't have forum buddies to help me out though just an HTML 4 manual LMAO '\| Glad it works now

	swinhoe	2003-04-30 #22
	glad thats sorted.... its weird how it does that with the url.... good work fellas'...

	colorblind	2003-05-01 #23
	Another guess would be: scroll=auto; in your body TAG ... It looks a like the space at the bottom is to be reserved for a vertical scrollbar, which only leaves after you refresh (considering the browser then knows you don't need it ... !! ) ...

	x-zero-x	2003-05-02 #24
	yeah, thought about the same thing.. but that still doesn't explain why it works when you follow a link and not when you enter the URL by hand..

	colorblind	2003-05-02 #25
	Well, there is a difference in following a link and passing it by entering it by hand ... not exactly the same procedure for the browser I guess ...

	x-zero-x	2003-05-02 #26
	hmm.. I guess what it could be is that when you follow a link the browser's height and width have already been stored somehow and are accessable to define the height and width in pixels from the 100%.. when you enter the URL by hand the browser probably doesn't have that info to use and thus doesn't know wether to display a scrollbar or not.. The browser waits untill the site has been fully loaded and does not display the scrollbar because the sites' width doesn't exceed the browsers' width.. but because the site has been built up with the browser reserving that space for the scrollbar it displays only the backgroundcolor.. (and thus not showing the table at a full 100%)

	colorblind	2003-05-02 #27
	that would be my guess exaclty x zero x ... so setting the scroll-property on "auto" would help I guess .. !!

	mls	2003-05-30 #28
	I can't tell you how many times I had come crossed that same problem. The last splash page I created for my site, had issues with there being a space from a width standpoint. I couldn't figure it out. I know this might sound crazy, but I used the rightmargin <tag> and seem to fix that problem. I did the same thing before I added that <tag> when refreshing the browser it seem to be 100%.

	Azaloth	2003-05-31 #29
	As far as I know, this is a bug in certain version of IE6 that many people experience...and as posted earlier, CSS styling should fix the problem.

	colorblind	2003-06-04 #30
	Also, there is a unknown HTML command for the <body> tag Code: scroll="auto" // or scroll="no" // or scroll="yes" I have not yet tried to validate the command, but it works fine with IFrames as I've just used it for them today .. !!

	x-zero-x	2003-07-30 #31
	bump for the people in the Front-End forum.. // Colorblind, have you validated it yet?