[mdc]

i've been sitting here for the past hour playing around with this page.

i am on windows right now, so i haven't tested it in safari, only firefox. i assume it works in safari, since it does in firefox.

my goal with the page is to have the main image be 100% of the browser, the grey bar to be at the bottom, and then when you scroll down text is right below the grey bar. any overflow of the image should be hidden. (resize the page vertically so see what i mean)

as you are looking at that page it is fine. *but* the page has no !doctype, and thus doesn't validate. i know, not the end of the world, but still.

if i put in a transitional doctype, like on this page it looks exactly the same in internet explorer, but in firefox the image doesn't show up. it does not like the height: 100%; in the css.
if i put the height as the height of the image it shows the overflow below the grey bar.

anyone have any ideas?
fix the css? forget about the doctype?

at the end of the day, i don't care if it doesn't validate, this is partially for general knowledge, and i wouldn't mind finding out why it's not working.

thanks.

[Chuckit]

You have two html tags on your doctyped page, one of which is not terminated.

[mdc]

oops, that wasn't supposed to be there. sorry.
got rid of that, didn't help.

[selowitch]

Why don't you try XHTML 1.1 (Strict), and make sure it validates before you test it?

[CaptainHaddock]

height: 100% does not make something 100% the height of the browser window, only its container. Firefox is displaying the page correctly, and IE is incorrect.

There are few tutorials online of how to get something 100% of the window's height using valid xhtml and css. A search on Google should dig them up.