Short CSS Quiz/Survey

[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]

@deathshadow60

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.

@deathshadow60

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.

@deathshadow60

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]

@EarlyOut

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]

@thierry_koblentz

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]

@EarlyOut

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.