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

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

This was chosen as the best answer

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.

Answered over 9 years ago by Robert Koritnik
  • I'll go with this answer because it addresses the grouping issue I was having, as well as suggests using different tags Carson Myers over 9 years ago
danwellman 5600

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.

Answered over 9 years ago by danwellman
  • 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 Carson Myers over 9 years ago
  • 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." Dwayne Anderson over 9 years ago
  • 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>!) Doug over 9 years ago

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

Answered over 9 years ago by Jens Hedqvist
  • +1 for the link, a nice reference Carson Myers over 9 years ago