Test your CSS skills quiz #10

[rainmakr]

Looks like you may have posted my code for geargolum. I'd be scared to think that someone else thinks exactly the way I do...

[PicnicTutorials]

Well done everybody! Hats off to you...

[Paul O'B]

New quiz now posted.

works?
use clip:rect(50px 250px 100px 50px); and forget about clip:rect(50px, 250px, 100px, 50px); immediately comes to mind.

Only the version with the comma is valid CSS. However most browsers except IE will use both but it is not guaranteed to work and is no excuse for using invalid code. It's best to offer IE the other version via conditional comments.

i noticed that, none of the solutions have non repeating text within html (or they dont have it at all).
but i would have liked to see a solution that has the text used once, but still inside html and not css.
i don't like the idea of mixing content with css.

I think I mentioned that already (somewhere) that semantically the best solution would be with 1 paragraph of text only and the rest added via the content prroperty. I have a version of that somehwere but any one of eriks or Tommie's solution could be altered to fit and I believe I may have had entries like that also.

[Paul O'B]

Looks like you may have posted my code for geargolum. I'd be scared to think that someone else thinks exactly the way I do...

Sorry,

It took me hours to type that post. I have changed it now.

[Fre420]

clip:rect(50px 250px 100px 50px); seems to work in all browsers the same, am i missing something?
why use

clip:rect(50px, 250px, 100px, 50px);

if

clip:rect(50px 250px 100px 50px);

works?
use clip:rect(50px 250px 100px 50px); and forget about clip:rect(50px, 250px, 100px, 50px); immediately comes to mind.

Because it's non-valid CSS (without the comma) (spaces only = deprecated syntax)
http://reference.sitepoint.com/css/clip --> see compatibility

edit: Paul O'B was faster ...

[YuriKolovsky]

I think I mentioned that already (somewhere) that semantically the best solution would be with 1 paragraph of text only and the rest added via the content prroperty. I have a version of that somewhere but any one of eriks or Tommie's solution could be altered to fit and I believe I may have had entries like that also.

if you would ever find it, i would like to see it.

[molona]

I finally did it, but I found out that the solution was already here... My solution used divs and clip so nothing original under the sun... Oh well... next time

As a matter of fact, this made me realize that my code is getting worse due to lack of time and that I'm on autopilot most of the time, and I think that I am getting a serious case of "divitis" which I don't think it is good at all. I think I will have to work around my schedule to get some free time to experiment...

[Paul O'B]

Sorry you missed the deadline Nuria, I forgot you said you were working on it

[molona]

It is OK. I did it two days ago, but it wasn't pretty and it didn't work properly in Opera. I didn't realize what I was doing wrong till I looked at it today and finally worked properly (something as simple as chaging the tags order and deleting one CSS instruction).

As I said, my solution wasn't original and I wasn't sure that I was going to make it on time. Still, this small test has been very positive for me. I just realized that I have been so stressed trying to get things out of my desk that my code is becoming terrible and I was forgetting to enjoy what I was doing

[aguroyz]

hey can anyone please explain the html:before, html:after, and etc....

using (***:before) is quite new to me.. So plz bear w/ me.... tnx

[Centauri]

Info about :before can be found in the Sitepoint Reference.

[aguroyz]

Info about :before can be found in the Sitepoint Reference.

Wow thnx for that... too bad though it does not support all browsers...

[ro0bear]

Wow thnx for that... too bad though it does not support all browsers...

Well its the browsers that dont support it, not it that doesnt support the browsers. Yes its a real shame though

[Anamaria]

Wow .That was a good entry