Strange CSS Puzzle

Question

Therefore, for some reason, the following HTML responds only to notice id, not to flash or <%=key%> classes in my CSS. Why is this? In addition, I have a style that should exist depending on whether I show a flash message or not. However, using the notice id for styling, CSS always appears. However, I need a notice identifier for my ajax rendering of a flash message. How can I solve this problem?

 <div class="container"> <%= render 'layouts/header' %> <section class="round"> <div id= "notice"> <% flash.each do |key, value| %> <div class="flash <%= key %>"> <%= value %> </div> <% end %> </div> <%= yield %> </section> <%= render 'layouts/footer' %> <%= debug(params) if Rails.env.development? %> </div> 

Here's the CSS:

 .error, .alert, .notice, .success, #notice, .info { padding:0.8em; margin-bottom:1em; border:2px solid #ddd; } #notice { background:#e6efc2; color:#264409; border-color:#c6d880; } 

And here is the corresponding html output. Please note that this is only a div.

 <section class="round"> <div id= "notice"></div> <!-- yielded content --> </section> 

Answer 1

and in your CSS the class is not defined correctly:

 .notice{} 

it must be declared using the id (#) selector, since you are using an identifier (compared to the class selector).

 #notice{} 

Also, the flash memory class is not defined. Therefore, in your CSS just add something like this:

 .flash{color:#F00} 

more or less see in action here (just inserted ur html and added flash class): http://jsfiddle.net/gmedina/uMCDM/1/

Answer 2

It's hard to say without seeing the full html and css, but if you set the style for your notification id, for example #notice {} , you cannot override it with the css you posted: .error, .alert, .notice, .success, .info {} as an Identifier has a higher value in cascade than a class (100 versus 10 if I am not mistaken).

To override the settings from #notice , you will need:

 #notice .alert { } // etc. 

Answer 3

you need to parse the key value as a string. try

 <div class="flash <%= '#{key}' %>">