I'm having some trouble with grouping/nesting in CSS.
I'm trying to make this look how you would expect it to look:
<p class="systemerror">
<b>Fatal Error:</b> could not instantiate <pre>Exceptions</pre>.
</p>
Here is my CSS:
.systemerror {
border: 1px solid #CC3333;
padding: 5px;
margin: 0px 1px 1px 1px;
}
.usererror {
border: 1px solid #CC33CC;
padding: 5px;
margin: 0px 1px 1px 1px;
}
.systemerror,.usererror pre {
font-family: "Courier New", monospace;
display: inline;
}
It should be displayed in a red box, on a single line, with everything wrapped in <pre> in monospace font. But what's happening, is I get "Fatal Error: Could not instantiate" in the red box, then "Exceptions" on a line below the red box, and then a period on yet another line.
Any suggestions? How can I stop losing at CSS?
3 answers
points
Your last class definition doesn't hit your pre element, because given the HTML code, your pre is not contained within .usererror class.
Your class definition should either be:
.systemerror pre, .usererror pre { ... }
or simply
pre { ... }
But it would probably be wise to alter your elements and use strong and code as other suggested.
- I'll go with this answer because it addresses the grouping issue I was having, as well as suggests using different tags
points
I would change the <b> tag to a <strong> tag as the <b> element was deprecated some time ago.
I would also change the <pre> to a <span> - I know you're setting the display property of the <pre> to inline in your CSS, but that doesn't alter the fact that fundamentally it is still a block-level element and is therefore causing the HTML to be invalid.
- Are you sure `<b>` is deprecated? http://www.w3schools.com/tags/tag_font_style.asp lists it under HTML 4.01, and Jens' link http://keryx.se/resources/html-elements/ has it listed as OK under 4.01 strict
- In the words of the SEO Rapper (look him up) "don't use bold, please use strong. if you use bold, that's old and wrong."
- No, <b> is not deprecated. Yes, there are times when it is semantically more appropriate than <strong>. See here for examples: http://dev.w3.org/html5/spec/text-level-semantics.html#the-b-element (Having said that, the HTML in this question definitely should use <strong>!)
point
In stead of a span or pre you could use the <code>, <kbd>, <samp> or <var> element, depending on what you are outputing (read more here http://keryx.se/resources/html-elements/).
- +1 for the link, a nice reference
