CSS - Test Your CSS Skills Number 11

[ornette]

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

[Paul O'B]

I'll publish most of the entries so that we can see the different methods used.

[molona]

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

[Stormrider]

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

Are you sure?

Must be centred perfectly in viewport (within 1 or 2 pixels at most)

[zcorpan]

No absolute positioning

Hmm, how about fixed positioning?

[Paul O'B]

Hmm, how about fixed positioning?

That's a loophole that some members have already sneaked an entry in with

[AutisticCuckoo]

That's not a loophole. Fixed positioning counts as absolute positioning.

According to section 9.6.1 of the spec,

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

[Paul O'B]

That's not a loophole. Fixed positioning counts as absolute positioning.

Yes, I know that and you know that but some of our members didn't know that

(I still liked their ingenuity though )

[molona]

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.

I confess that I haven't dedicated too much time.

[dresden_phoenix]

Late entry, but I think I got it... maybe....

[Erik J]

...
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.

Perfectly centered in the screen=viewport is what is required.

You can remove the scrollbar.

[dresden_phoenix]

oops i didnt see the no absolute positioning...... drat!

[Paul O'B]

Bad luck dresden but good effort anyway

I have an entry form Force Flow (without the middle dividing line) that centres nicely in Opera and Firefox.

[Paul O'B]

Solution Time

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% 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.

Solutions:

This is Eriks version that works in Firefox,Opera and Safari:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title><meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
html,
body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    overflow:hidden;
}
body:before{
    display:block;
    height:15%;
    content:" ";
}
div{
    position:relative;
    left:15%;
    margin:-10px 0 0 -10px;
    border:10px solid;
    width:70%;
    height:70%;
}
div:before{
    display:block;
    margin-bottom:-10px;
    height:25%;
    content:" ";
}
p{
    position:relative;
    left:25%;
    margin:-10px 0 0 -10px;
    border:10px solid;
    width:50%;
    height:50%;
}
p:before{
    display:block;
    margin:-5px -92% -5px;
    border-bottom:10px solid black;
    width:284%;
    height:50%;
    content:" ";
}
span{
    display:block;
    position:relative;
    top:-.53em;
    width:100%;
    color:red;
    text-align:center;
    font:bold 4em/1 verdana;
}
</style></head><body>
<div>
    <p>
        <span>X</span>
    </p>
</div>
</body></html>

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.

My (hacky) Version

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
    margin:0;
    padding:0;
    vertical-align:top;
}
html {
    height:100%;
    text-align:center;
    overflow:hidden;
}
body {
    height:50%;
    border-bottom:10px solid red;
    position:relative;
    margin-top:-5px;
}
div {
    height:180%;
    width:80%;
    position:relative;
    border:10px solid #000;
    margin:-5px 0 -100% -10px;
    float:left;
    left:10%;
    top:10%;
}
p {
    top:10%;
    position:relative;
    height:80%;
    width:80%;
    border:10px solid #000;
    margin:-10px auto -100%;
}
span {
    position:relative;
    color:red;
    font:bold 3.6em/1.2 verdana;
    top:50%;
    margin-top:-.63em;
    display:block;
    height:100%
}
span:before, body:before, div:before {
    height:50%;
    display:block;
    content:" ";
    color:red;
}
body:before, div:before {height:10%}
p>span, body>div, div>p {top:0}
*+html p span {top:50%}
*+html p, *+html div {top:10%}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

The first correct entries I received were fromTommy and YuriKolovsky as follows.

Tommy: Opera - only

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tommy - opera</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html {
    height:100%;
    background-color:#fff;
    font:bold 50px/50px sans-serif
}
body {
    height:50%;
    margin:0 10px;
    padding:1px 0 0;
    border-bottom:10px solid #000
}
div {
    position:relative;
    top:33.33%;
    width:66.67%;
    height:133.33%;
    margin:-10px auto 0;
    border:10px solid #000
}
p {
    position:relative;
    top:25%;
    width:50%;
    height:50%;
    margin:-10px auto 0;
    border:10px solid #000;
    text-align:center
}
span {
    display:block;
    position:relative;
    top:50%;
    margin-top:-25px;
    color:#f00
}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

YuriKolovsky - Firefox only

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YuriKolovsky: Solution to CSS Quiz #11 in Firefox</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    position:relative;
}
html {
    height:100%;
    text-align: center;
}
span {
    font-size:80px;
    font-family:Arial, Helvetica, sans-serif;
    color:red;
}
body {
    display:block;
    height:50%;
    border:solid red 1px;
    border-bottom:solid black 4px;
}
div {
    border:solid black 4px;
    display:block;
    margin:0 auto 0 auto;
    top: 25%;
    height:150%;
    width:70%;
    overflow:visible;
    margin-top:-2px;
}
p {
    border:solid black 4px;
    top:25%;
    height:50%;
    width:70%;
    margin:0 auto 0 auto;
    margin-top:-4px;
}
span {
    display:block;
    top: 50%;
    height:60px;
    line-height:90px;
    margin-top: -42px;
}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

YuriKolovsky also gave me three other solutions with minor improvements that worked in different browsers but I wont post them all or I will be here all day

Continued in Next post:

[Paul O'B]

Continued from above ....

Eric Watson: Firefox only

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Eric Watson  - Erik's Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100&#37;;
color:red;
font-size:2.5em;
line-height:0;
font-family:Arial;
}
div {
height:50%;
width:50%;
position:relative;
top:25%;
margin:0 auto;
border:10px solid #000;
}
p {
height:50%;
width:50%;
margin:-10px auto 0;
border:10px solid #000;
position:relative;
top:25%;
}
span {
display:block;
position:relative;
top:50%;
margin:-5px -145% 0;
border-top:10px solid #000;
text-align:center;
}
</style>
</head>
<body>

<div>
<p><span>X</span></p>
</div>

</body>

</html>

Roobear - Firefox and OPera
(Used the outline property to circumvent the opera bug mentioned above)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ro0bear - firefox and opera</title>
<style type="text/css">
* {
    font-size: 1.5em;
    line-height: 0;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
html {
    background-color: white;
    height: 100%;
}
body {
    background-color: black;
    position: relative;
    top: 49%;
    height: 2%;
}
div {
    width: 80%;
    height: 4000%;
    position: relative;
    top: -1950%;
    left: 10%;
    outline: black 10px solid;
}
p {
    width: 60%;
    height: 60%;
    position: relative;
    top: 20%;
    left: 20%;
    text-align: center;
    outline: black 10px solid;
}
span {
    color: red;
    height: 0;
    position: relative;
    top: 52%;
}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

Centauri - Firefox and IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
    overflow: hidden;
}
body {
    border-top: 10px solid black;
    position: relative;
    top: 50%;
    height: 80%;
    margin-top: -5px;
    font-size: 3.76em;
    line-height: 1;
}
div {
    width: 70%;
    margin: -15px auto 0;
    border: 10px solid black;
    height: 100%;
    position: relative;
    top: -50%;
}
p {
    border: 10px solid black;
    width: 50%;
    height: 50%;
    position: relative;
    top: 25%;
    margin: -10px auto 0;
}
span {
    color: #FF0000;
    position: relative;
    top: 50%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-top: -0.535em;
    display: block;
    text-align: center;
    line-height: 1em;
}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

Raffles- opera
(Also used outline but also used display:table to center)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Raffles - opera Untitled Document</title>
<style>
* {margin:0; padding:0}
html {height:100%}
body {
  height:50%;
  border-bottom:10px solid black;
  top:-10px;
  padding-top:5px;
  position:relative;
}
body * {
  outline:10px solid black;
  position:relative;
  margin:0 auto
}
div {
  height:160%;
  width:60%;
  top:20%;
  margin-top:3px;
  display:table;
  padding:10%
}
p {
  height:40%;
  width:60%;
  display:table-cell;
  vertical-align:middle
}
span {
  display:block;
  color:red;
  font:bold 500% sans-serif;
  outline:0;
  text-align:center;
}
</style>
</head>
<body>
<div>
    <p> <span>X</span> </p>
</div>
</body>
</html>

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)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mark Brown - Firefox, Opera and Safari</title>
<style type="text/css">
* { margin: 0; padding: 0 }
html, body {
    height: 100%;
    font-size: 200%;
    color: red;
    text-align: center;
}
div {
    height: 50%;
    border-bottom: 5px solid #000;
    margin-top: -2px;
}
p {
    border: 5px solid #000;
    position: fixed;
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
}
span {
    border: 5px solid #000;
    text-indent: -9999px;
    position: fixed;
    top: 40%;
    bottom: 40%;
    left: 40%;
    right: 40%;

}
body:after {
    content: 'X';
    text-indent: 0;
    display: block;
    vertical-align: middle;
    margin-top: -.62em;
}
</style>
</head>
<body>
<div>
  <p> <span>X</span> </p>
</div>
</body>
</html>

Force Flow - Firefox and OPera
(Simple version without dividing line - uses display:table to nice effect)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Force Flow - FF/opera - no middle line</title>
<style type="text/css">

html, body, p {
    padding: 0px;
    margin: 0px;
}
html, body, div, p { height: 100%; }
body, p {
    width: 50%;
    height: 50%;
    display: table;
    margin: 0 auto;
}
body {
    position: relative;
    top: 25%;
}
div, span {
    display: table-cell;
    vertical-align: middle;
}
p {
    overflow: hidden;
    text-align:center;
}
div, p {
    border: 10px solid black;
}
span {
    font-family: Verdana, Geneva, sans-serif;
    color: red;
    font-size: 3em;
    font-weight: bold;
}

</style>
</head>
<body>
<div>
<p><span>X</span></p>
</div>
</body>
</html>

I had many other entries which I haven't shown as they used similar methods to above so thanks to all. If I haven't posted your favourite submission then feel free to post it yourself.

Thanks to all for taking part and keep a look out for the next quiz which will follow in a couple of days

[Tnargeel]

Great quiz!!

I was miles off any sort of solution. CSS Positioning is a weak area for me so this was a challenge!

Looking forward to the next one!

[YuriKolovsky]

this is the real way of learning
its just sad that so few schools and educational facilities use these techniques, mainly because they don't know much about the subject themselves.

thanks Paul, Erik for the brain puzzle!
thanks for the couple of days "relax time", ill just get enough time to finish a job, and then go back to quizzes...

now i will closely examine the quiz entries.
it will require quality reading time.

and a special thanks for your hacky all browsers version!


edit:
these quizzes are a "new user magnet"

congrats on you first post Tnargeel!!!

[Larry973]

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

[YuriKolovsky]

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

some people including me, added a border-top or border-bottom to the body.
and moved the body 50% down.
and then moved everything else up, in a simple explanation.

others added the border to the span element.
i will probably fail at explaining that.

and some have used pseudo classes (p:before) to add the border to css created elements (im not sure if im using the right words).


pauls solution summary:

* {
    margin:0;
    padding:0;
}
html {
    height:100%;
    overflow:hidden;
}
body {
    height:50%;
    border-bottom:10px solid black;
}

[ro0bear]

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.

[AutisticCuckoo]

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

In my solution, I set the body height to 50% of the viewport's and added a bottom border to the body. Then I shifted the body contents down so that half of it overflowed the body.

There are many ways to do this, as you can see.

[molona]

Perfectly centered in the screen=viewport is what is required.

You can remove the scrollbar.

Ok, It was perfectly centered on the document, but not on the screen

[Larry973]

Thank you, Yuri, Roobear and Tommy.

[molona]

I need to tell it to the world... I am need to go back to school and learn reading... either that, or I need some holidays and read more slowly...

I thought I couldn't use any type of positioning at all!

So none of my solutions included any positioning... One of them is based on display (table, table-cell, etc) and the other one was based solely on the use of margins and paddings...

I think that I am going to have a few drinks now. I think I need it. You can't get it worse than this

[RyanReese]

I hate work...when is the new quiz going to be posted?