Short CSS Quiz/Survey

[thierry koblentz]

... so I may have completely missed the point.

I just checked your answers. You understood what to do and you are very close. Only one error

[deathshadow60]

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.

[thierry koblentz]

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.

You're saying too much

[Paul O'B]

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.

Thanks for participating!

lol - Don't worry I have the same problem in the CSS quizzes here as it's always hard to phrase something without giving too much away but still make it clear what needs to be done.

[Stomme poes]

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.

It totally wasn't, maybe because we're CSS people who assume

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.

[Paul O'B]

lol - I just realised that my submission had one too many rules

[thierry koblentz]

lol - I just realised that my submission had one too many rules

Yes, but in the spirit of this quizz I consider you the winner

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.

[Stevie D]

It seems the quiz is now closed.

For posterity, any chance you could re-post it here with the correct answer and rationale?

[thierry koblentz]

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.

I can't believe I put one too many digit in there
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.

[thierry koblentz]

Yes, I'm planning to write something and put it up on my site. I'll put the link here when that's done.

Thanks

[Stomme poes]

Which site? There are 3 in your sig.

[thierry koblentz]

Either tjkdesign or css-101, in any case I'll make sure to post the link here.

[thierry koblentz]

Here it is: CSS Quiz from April 28, 2011: results

Thanks to all who participated!

[deathshadow60]

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.

[Paul O'B]

Thanks Thierry for an interesting quiz which sparked some interesting debate

As the screenshot below shows, anonymous online quizzes are troll magnets ;-)

lol - where do they come from

[EarlyOut]

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

[Stomme poes]

There would then still be no content, and still nothing would be displayed.

Not if you fixed it:

background: url(theimage.png) no-repeat;
padding: 50px;

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

[thierry koblentz]

Your "explanation" is flawed, as for the 50px padding you say:
This declaration cannot be removed as it would make the box shrink.

But at this point, the author has no knowledge of any other padding declaration. We could even say that he should not even expect another one.

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!

Did you read the description for the last rule? It says:

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.

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.

It is a valid point, but the quiz was about display, not behavior. Besides, it would not really break anything. It would rather "fix" something that is already broken. Unless that padding (I'd say the top padding) is used as a hack to prevent user interaction. But in this case I'd expect some serious commenting around that rule

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!

[thierry koblentz]

Thanks Paul

Regarding trolls, I suspect this one came from reddit.

[thierry koblentz]

My thought was that, since there was no content, and nothing being displayed, you could eliminate all the CSS.

Who said there was no content?
The box does exist on the page and it wraps some text.

In the background declaration, remove no-repeat and see what it does

[EarlyOut]

In the background declaration, remove no-repeat and see what it does

I thought the rules of the quiz were that no declaration was to be fixed, only removed or not removed.

[thierry koblentz]

I thought the rules of the quiz were that no declaration was to be fixed, only removed or not removed.

Removing that part of the rule would fix the declaration, but would fail the test as this would change the look of the page

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.