Vertical % spacing

[flipjoebanana]

I am new to css and am having problems with setting a single object(say a table) from a set percentage from the top of the page as well as the main background.

body {
	background-image:url(mainbg.jpg);
	background-repeat:repeat-x;
	background-position: 0% 30%;
	background-attachment:fixed;
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

table {
        position: absolute; // tried different combinations here
        top: 30%;
}

What should I be using for the table(or div)? Thanks

[1337cookie]

Can I see your HTML? The percentage is based on the object's parent.
If you set the body's background position as being 30% from the top, it will be 30% of the visible document. (You probably know this I just like the sound of my keyboard.)
Anyway despite me forgetting what I was trying to say you should set your table's width and height using CSS if you want to use CSS positioning. In fact set everything's width and height with CSS and you should have less problems in general.

[MidiMagic]

I am new to css and am having problems with setting a single object(say a table) from a set percentage from the top of the page as well as the main background.

What should I be using for the table(or div)? Thanks

What you are asking is practically impossible. You are wasting your time trying.

The one thing that the web page can not know in a way that works on all browsers is the height of the browser pane. The Internet is not designed to work that way. Height refers to the height of the document, not the pane.

The basic design of the Internet is a long scroll of paper that is the length of your document. Rendering starts at the top, and expands downward until everything is rendered. You can NOT think of the browser pane as a sheet of paper that you can arrange however you want it.

Why is this so? It is because the following are different for each computer, monitor, browser, browser configuration, and browser window size:

- There are many different screen resolutions, each with a different number of pixels.

- There are now several different aspect ratios (width:height), including the normal 4:3 and the new 16:9.

- Different browsers have different aspect ratios for the viewing pane for the web page.

- The number of toolbars displayed on the browser changes the size and aspect ratio of the pane.

- Of the few browsers that can report the height of the pane, none of them use the same reporting method.

- The user might have the browser restored down, with any possible size and aspect ratio.

Don't plan a page to exactly fit the pane. It is a pain trying to do the impossible.

Your use of absolute positioning and pixels for sizes makes the page incompatible with most computers.

Note that 0px is an invalid style. The value 0 must never have a unit of measure attached to it. Some browsers throw the style away if it has a 0 with a unit of measure. Use a 0 with no unit of measure for all 0 values.

[1337cookie]

Note that 0px is an invalid style.

Actually it validates.... Where did you learn standards?

Lets say you set your top and bottom margins to 30%. percentages can still be used to divide the page.

[MidiMagic]

Actually it validates.... Where did you learn standards?

The school of hard knocks! (In other words: In reality, it still doesn't work.)

It validates, but it won't work right on all browsers. Firefox, for instance, throws out the entire style if it finds 0 with a unit of measure (e.g. 0px).

It's sort of like the <br/> tag. It validates, but IE messes up royally if you don't put the space before the slash.

Lets say you set your top and bottom margins to 30%. percentages can still be used to divide the page.

Percentages can divide the page, but that does not make the page fit the height of the browser pane. It divides the content among the height of the entire content, not the pane. The resulting page could be nicely divided into percentages, but it could also be half the browser pane height, or it could be twice the height of the browser pane.

Because the content is usually bigger than the browser pane, and because the aspect ratio of the browser pane is not standardized, the Internet is designed to sacrifice height specification in favor of width. So the Internet is designed to expand downward from the top until all content is rendered.

Trying to make content exactly fit the browser window, and trying to center something vertically in the browser window, are both wastes of time. There is no way to do it that works on all browsers, window sizes, screen resolutions, and aspect ratios.

Think about this: My boss just got a new monitor with a 16:9 aspect ratio, instead of the normal 4:3 aspect ratio. Anything that fits the normal 4:3 screen shows only the top half of the page on the 16:9 screen. She has to restore down the browser from maximized, and then stretch it to a 4:3 ratio, to see pages the way others see them.