CSS and templates

Question

Hi,

I had a quick question concerning css and a template i'm using.

I have two fields in my CSS:

.content
{
padding:10px;
width: 100%
text-align:justify;
font: 9pt/14pt 'Lucida Grande', Verdana, Helvetica, sans-serif;

}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: red;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

in my html code

   <div class="content">

        <div class="errorExplanation" id="errorExplanation">
           <h2> 10 errors prohibited this counselor questionary from being                             
                saved
           </h2>
          <p>There were problems with the following fields:</p>
       </div>    
   </div>

I would expect the #errorExplanation to be in red based on the css, but it isn't. I'm new to css, so I think i'm missing something.

An example is http://www.otoplusvn.com/TherapistSurvey/counselor_questionaries/new and press the Next button. You'll notice the error message pop up which is generated by ruby on rails validation, but its not in red. I want it to be in red and bold.

Any Advice Appreciated, Thanks!

Answer 1

I can't see #errorExplanation in your stylesheet on the site you provide. Is it definitely being uploaded? Or I might have missed it somewhere..

Answer 2

Your CSS on the link you gave isn't containing the CSS code you pasted above. That's why it isn't red bordered.

Answer 3

Your question stated "I would expect the #errorExplanation to be in red". I would imply you are referring to the background color. I would avoid wording a question as a preposition only because it creates a vague sense of relatively that can be hard to interpret over a text message.

Your CSS for #errorExplanation is declaring the background white, the border red.

To get the background red, here's what the code would be:

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: red; /* #f0f0f0 is white */
}