Only error I can think of is the ONE thing I ... well... I won't give it away, but pretty sure that still works on inline-level elements.... though it's something I would NEVER do in code in the first place.
It totally wasn't, maybe because we're CSS people who assumeQuote:
Actually, I'm starting to think that I should have asked a native english speaker to write the question for me as it seems the way I worded it has confused many people. Even though I thought it was pretty straightforward.
a) CSS is supposed to Do Stuff
b) someone (a user) was expecting it to Do Stuff
c) we're supposed to fix it so that it does Do Stuff
So I'd been trying to think of how to make the thing work, and that wasn't the point.
Next time I would say, "This element has these styles (below). These styles are in order (if you're going to list the same property twice, then just answer this question for participants right away). Remove any rules which can be removed without changing how this element displays."
(so, nothing about rewriting them, because that's when we start thinking "oh, that means we should fix them"). I think that's what threw many people off, and why they asked for context.
lol - I just realised that my submission had one too many rules :)
Because you're the only one who spotted the possible issue with the last declaration. Even though it is a edge case which is more related to "behavior" than "display" it is the kind of thing that gives you bonus point.
fyi, I think only 4 or 5 people out of a hundred said the whole rule could be removed and I believe one of them just guessed it as he listed himself as "beginner". Either that or the guy is really modest ;-)
Also, there could be a false positive in there. For example, some people have removed the z-index value because they said the value was too high (only true for Safari 3 I believe), not saying it was because the element was not positioned.
It seems the quiz is now closed.
For posterity, any chance you could re-post it here with the correct answer and rationale?
I just noticed that I have 2,200,007,253 in the rule and not 200,007,253 as I thought. In this case the value is too large as the maximum is 2,147,483,647 (32bit signed integer)
This does not change the answer for the quiz though, but it gives bonus point to people who removed it because of the span not being positioned and for being a too large value anyway.
Yes, I'm planning to write something and put it up on my site. I'll put the link here when that's done.
Which site? There are 3 in your sig.
Either tjkdesign or css-101, in any case I'll make sure to post the link here.
Here it is: CSS Quiz from April 28, 2011: results
Thanks to all who participated!
Your "explanation" is flawed, as for the 50px padding you say:
This declaration cannot be removed as it would make the box shrink.
It's overridden by the second one -- which applies NO side padding, so the net result would be NO padding applied; there-in BOTH paddings could be removed as NO padding is actually applied for positioning.
So your answer is wrong. BOTH paddings should be removed as zero padding is applied when both are present. Removing it will make it render 100px wider than it does with it in there!
Though Pauls response does raise a point; of the two paddings only the second one is applied -- and that would render in some browsers without changing the actual height of the element, so the second one DOES do something while the first one is overridden.
Though I could have sworn text-indent worked on display:inline elements... NOT that I would ever apply text-indent in that manner in my code as that's an outdated/broken/half-assed method for what is likely trying to be an image replacement.
Thanks Thierry for an interesting quiz which sparked some interesting debate :)
lol - where do they come from:)Quote:
As the screenshot below shows, anonymous online quizzes are troll magnets ;-)
Funny. I'm a rank amateur with CSS, and had the right answer. But for the wrong reason. My thought was that, since there was no content, and nothing being displayed, you could eliminate all the CSS. There would then still be no content, and still nothing would be displayed. ;)
By analogy, if you had a page of HTML, but specified that the page would never be opened in a browser, how much of the page could you delete? All of it, obviously. If a tree falls in the forest... :D
Not if you fixed it:Quote:
There would then still be no content, and still nothing would be displayed.
background: url(theimage.png) no-repeat;
Zero content, something displayed. A (badly implemented) sandbag.
But because the background-image property was screwed up, it wouldn't have appeared, so then yeah, nothing appears. If there were text content then possibly the padding changes (assuming Crusty is right and that was the CSS order, even tho 50px padding was overridden by 10px 0 padding, adding text would indeed give the thing a content-width).
The rule already includes a padding declaration. Because of the cascade, the first one (above) is ignored. As mentioned earlier, top and bottom values do not change the dimension of the box, thus this declaration can be removed.
Anyway, I edited the page to add to both descriptions (see bold text):
This declaration cannot be removed as it would make the box shrink (make sure to keep reading though).
As mentioned earlier, top and bottom values do not change the dimension of the box, thus this declaration can be removed as well as the first padding declaration in this rule.
Thanks a lot for your feedback!
Regarding trolls, I suspect this one came from reddit.
I only suggested to do this to see that the box (the span) was not empty. That unlike the original quiz, the article contains both the styles and the markup.