Test your CSS skills

**jag5311** · May 10, 2004, 16:57

42 is my guess, maybe even 40.

**vgarcia** · May 10, 2004, 17:24

Off Topic:

I feel like a preschooler in this thread

**megamanXplosion** · May 10, 2004, 20:39

Originally Posted by r937

danson, them's fighting words

paul, would you please set up a challenge for the two of us

these are the conditions: no hacks, no spans, no divs, must validate xhtml strict and css1

danson, are you game? put up, or, as the kids say, stfu

I'd like to see a contest like that. I will not work according to a timer (like this competition was ran), but I would be more than happy to take a swing at completing the challenge. I love experimenting around with CSS in ways that most people won't

Off Topic:

vgarcia: I would be a toddler then hehe. I'm only 19

Edit - Danson: It is entirely possible to complete a CSS-challenge without using divs, spans, tables, images, etc. A little bit of clever thinking and document manipulation will go far ^_^

**Paul O'B** · May 11, 2004, 02:28

Off Topic:

Originally Posted by bryan

42 is my guess, maybe even 40.

hey I guess I'm wearing well as your out by 10 years lol

Originally Posted by megaman

but I would be more than happy to take a swing at completing the challenge.

I haven't posted the solution to the current one yet in case anyone else wants to try and make it work. Nick is the only one so far and his solution was more or less identical to mine but I'd be interested to see any other solutions. Hey there might even be a solution without hacks ( but I doubt it

).

I'm working on another test that doesn't use hacks so hopefully that will keep everyone happy

Paul

**jag5311** · May 11, 2004, 05:56

Off Topic:

So is tha 50 or 52

**r937** · May 11, 2004, 06:00

next month, i turn 20,000!! what a nice round number!!

**Paul O'B** · May 11, 2004, 06:16

Originally Posted by bryan

So is tha 50 or 52

52 next august

Originally Posted by rudy

next month, i turn 20,000!!

Is that dollars or pounds ?

**r937** · May 11, 2004, 06:21

well, let's see

it can't be years, it can't be months, it can't be weeks...

and 20,000 hours would make me just under 2 years old

so it's gotta be....? anyone? buehler?

**Paul O'B** · May 11, 2004, 06:53

Off Topic:

Hmmm - let me see...

Its either 14 days old approx (20,000 minutes)

or could it be nearly 55 years old (20,000 days)

I wonder which one it is

Paul

**Paul O'B** · May 13, 2004, 06:35

Hi,

Well no-one apart form Nick (doctornick) has offered a solution to this (with or without hacks) so here's the answer.

This was the orignal page that only worked in mozilla browsers etc.

http://www.pmob.co.uk/temp/spointquizq.htm

Heres the solution that works both in ie6 and firefox as per the challenge.

http://www.pmob.co.uk/temp/spointquiza.htm

If you remember the original problem was that there didn't seem to be anyway to keep the element on the bottom of the window and keep it a set distance form the top.

I gave a big clue in the first post by saying that only the css needed changing plus one other thing in the head of the page. Nick was quick enough to spot that the only thing to make a difference to the page would be the doctype. As I stated that the page had to be valid xhtml the solution was to use the xml prologue to force ie into quirks mode.

What good is that? - I hear you say. Well if you remember that ie6 in quirks mode uses the broken box model which puts padding and borders inside the element and not added to it as per the standard.

This allows as to specify a 100% height for the body but to also set padding that still keeps the total height at 100%.

Code:

* html body {height:100%;margin:0;padding:180px 0 20px 0}

The star selector hack is used to give the style to ie only because as we know mozilla already works fine.

The padding top on the body is set to 180px which makes the page start 180px from the top. This keeps the page 180px from the top and also resting on the bottom at all times.

The next step was to remove the header from the flow and place it absolutely otherwise the header would start at 180px from the top. The header is placed absolutely at the top of the page i.e. the body outside of the margins I set.

Code:

* html #header {position:absolute;top:0;left:0;}

The last step was just to hide the #content element from each browser as the postioning is now different for both browsers. The child selector was to use to give mozilla values and the star selector used to give Ie6 its values.

Code:

html>body #content {
 position: absolute;
 overflow: auto;
 top: 180px;
 left: 20px;
 right: 20px;
 bottom: 20px;
 padding: 10px;
 background:#fff;
}
* html #content {
 height:100%;
 margin:20px;
 padding-bottom:20px;
 overflow:auto;
 position:relative;
 z-index:100;
 background:#fff;
}

Thats it

I hope you enjoyed it and sorry that it wasn't hack free but each version will actually work without hacks but not in both browsers at the same time unfortunately

.

Congratulations to Nick and keep a lookout for my next quiz which will be hack free (with any luck

)

Paul

**jag5311** · May 13, 2004, 07:30

uhhh, yea, I would have definitly not been able to figure that out

I am what you call a "css moron"

, but I do have my moments of brilliance.

**Octal** · May 20, 2004, 06:15

I am what you call a "css moron"

I think I am as well. I got lost after quirks mode. Maybe I will come back and re-read the solution after I am done with my search on "divitis"

**Sahajin** · May 23, 2004, 10:36

just an FYI,

I have seen mozilla read this

* html #header {position:absolute;top:0;left:0;}

you should include the tag you want it to be on then mozilla won't read it.

* html div#header {position:absolute;top:0;left:0;}

I know this cause I tried to z-index somethnig to a -1 in IE and mozilla read it and blanked the page out. and yes it was a z-index: -1 as mozilla hates that.

**Paul O'B** · May 23, 2004, 12:59

Hi,

[quote=sahajin]
I have seen mozilla read this
* html #header {position:absolute;top:0;left:0;}
[/code]

Not in any mozilla browser that I've ever tested - all will ignore it. Could you please post examples as this would be extremely interesting.

According to all sources i've seen IE is the only browser that incorrectly parses the * html (star selector hack).

For mozilla to parse this on odd occasions just wouldn't make sense. I feel you must have made some error somewhere. The universal selector on its own will be parsed by mozilla and other browsers as it is like a wild card that matches any element.

The reason mozilla doesn't parse * html is that there would need to be a parent of html in order for it to work. As we all know html is the root element which is why this combination fails in all browsers except IE.

Regarding negative z-indexes mozilla will put the element behind the body and if the body is not transparent then the element will not show. For this reason negative z-indexes are unpredicatable and should be used with caution.

In css2.1 the stacking rules have been changed so that an element can never be stacked below the background of its stacking context.

Paul

**Sahajin** · May 23, 2004, 13:15

I totally agree with you. everything I read said the same, mozilla shouldn't read it. but wouldn't you know it now that I want it to happen I can't get it to do it. it must have been a combination of other things that I had. I swear all I changed was that hack and added the tag to it. then it stopped.

my appologies for steering everybody the wrong way

I'll be quiet now

**Paul O'B** · May 23, 2004, 13:47

I'll be quiet now

lol - don't worry you still may be right

Theres always the exception to the rule! A thing is only true until its proved false (or vice versa)

.

Paul

**Tudor** · May 30, 2004, 07:08

Woo, I guessed I learned all my CSS from W3C, making me total unaware of the different hacks you pro's are using. The star selector hack will become most useful, thanks alot. I think i stumbled over it sometimes before but never bothered to fully understand its advantages. It's a shame we need it, really.

Also, the child selector was new to me. Refering to html>body. What does it do? As I understand Moz will use it but not IE. Is it a hack or real CSS? What do other browsers like Opera think of this?

I know this is kind of off topic, hope you don't mind since competition on this thread is already finished.
Tudor

**Paul O'B** · May 30, 2004, 08:01

Also, the child selector was new to me. Refering to html>body. What does it do? As I understand Moz will use it but not IE. Is it a hack or real CSS? What do other browsers like Opera think of this?

The child selector is valid CSS, its just that IE doesn't understand it and ignores the whole style. Most other modern browsers understand it and will parse the styles correctly.

A > B will select any element B which is a child of element A. Any grandchildren will not be selected as they won't match.

My opinion of hacks is that you should do everything you can to avoid them but if you still need to use them then use them sparingly and use the well established ones that are unlikely to cause problems in the future.

See here for more information:

http://www.info.com.ph/~etan/w3panth...ifiedsbmh.html

Hope that helps.

Paul

**Tudor** · May 30, 2004, 08:51

Very helpful indeed(unfortunately), thanks a lot =)

**ricem84** · May 22, 2009, 13:46

Wow, this is such a good idea. I've read books about PHP and mySQL and sat down at the computer clueless because I remember best what I do. I was hoping somebody somewhere would have something where I could code in CSS and am CORRECTED so I can learn more.

The SitePoint Forums have moved.

User Tag List

Thread: Test your CSS skills

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions