The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I can't wait until tomorrow. I've been struggling for the last three days on and off and have got some near solutions, but nothing good enough to send you Paul.
When I get to see the answers, I'll be able to see just what I wasn't doing right.
It's a great way to learn more about Css.
Will you publish all the solutions sent in that were right? Hope so.
Thanks

Well, don't wait for me... I tried different ways but the "solutions" made me less than happy... Only one of them seemed to work but it didn't center on the screen but in the viewport which is not what has been requested. I am upset now. I even based one of the methods on something that was mentioned about vertical alignment in your blog! and I can't get it

Thank you Stormrider. I just realize that I need to go back to school and learn how to read again

Ok, I expressed myself in the wrong way. What I mean is that my solution centers the x in the middle of the page, but the page is longer than the screen and I need to scroll down. And I don't think this is what they are asking for.

...
Ok, I expressed myself in the wrong way. What I mean is that my solution centers the x in the middle of the page, but the page is longer than the screen and I need to scroll down. And I don't think this is what they are asking for.

Ok, as this has quietened down a bit now we'll post the solutions and most of the entries I've received.

It's been a bit hard to judge so I have put Tommy and YuriKolovsky in first place because their entries were correct and received quite quickly. But special mention to Ro0bear and Centauri also for multiple entries.

Thanks to all those that entered as all the entries had a different slant on things and were all interesting even if some broke the rules or weren't quite centred.

The main point of the exercise was to show that you couldn't set an element to 80&#37; height and then use 10% top margins to vertically center it. The reasons are that the percentage values for margins (and padding) are based on the width of the containing block and never the height. This means that another method must be used to center the elements and as most of you have found out and the easiest was to use relative positioning instead.

This has been an interesting quiz (thanks Erik) and has thrown up a couple of browsers bugs (which have now been filed at Opera and Safari (thanks Simon)).

It's probably best if I explain the bugs before I post the solutions so that the workarounds make sense.

Opera Bug
The bug in Opera is when you move an element with a top relative position using a percentage then the percentage value should be based on the height of the element measured from the content edge of the containing block. However Opera calculates the height of the element and also includes the borders in the measurements.

Therefore in this quiz with 10px borders our layout will be 10px adrift in Opera using the same code. (When I first tried the quiz I only used 1px borders and didn't notice the difference as it was within my 2px allowance for error). Effectively this rules out using relative positioning for Opera.

Safari Bug
Safari has an even worse bug in that it will not relatively move an element (using either top and bottom position) when the parent is a percentage height (even if that height can be resolved by another parents fixed height). This means that Safari needs a completely different method altogether.

We also had versions that worked in IE6+ and Firefox at the same time which was pretty easy to do.

I have merged my IE/FF versions with the method needed for safari/opera and the following layout will display in all the following browsers ie6-8, Opera, Firefox and Safari but unfortunately I had to give IE a couple of its own rules in a little hack for the purpose of showing both techniques in one layout.

MarkBrown4 - Firefox OPera and Safari but uses a loophole
(This uses absolute positioning which was ruled out in the instructions as fixed positioning is basically absolutely positionng but with the viewport as the containing block)

Could you point out how the horizontal line through the "X" is created?

There is more than one way. I think the best way for you to learn about that is to copy and paste one of the code submissions into your own html file and then look at and play around with the code so you can see exactly how it works.