Weird CSS conundrum

Question

So for some reason the following html code only responds to the notice id and not the flash or <%=key%> classes in my CSS. Why is that? Also, I have some styling which should exist depending on whether I'm showing the flash message or not. However, using the notice id for styling, the CSS always shows up. However, I need the notice id for my ajax rendering of the 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's the relevant html output. Note that it's only the div.

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

Could you add the pure HTML output, and the relevant CSS? (not my downvote) — thirtydot, Mar 04 '11 at 18:24
That's two classes: one is `flash`, the other is the output of `<%=key%>` — Justin Meltzer, Mar 04 '11 at 18:37
in the css i mean you dont have flash in there. so how do you expect it to respond to a flash class in your css if it doesnt exist? — Will Ayd, Mar 04 '11 at 18:38
Could you add the pure HTML after Ruby has been executed? :) — thirtydot, Mar 04 '11 at 18:38
Just the empty `div` is not going to help us. If you use firefox, you can select your flash message, right-click and view the source of the html including the stuff returned by ajax. — jeroen, Mar 04 '11 at 18:45
This is literally what is returned by ajax:`
Micropost created!
` — Justin Meltzer, Mar 04 '11 at 18:49
@Justin Meltzer It seems there is no problem to solve, the classes you mention are not applied anywhere in the html so the styles are never used. — jeroen, Mar 04 '11 at 19:15
Im very confused. Why is this happening??? I define the classes in my html and in my CSS, and I link in my stylesheets. Why does this weird stuff always happen to me... — Justin Meltzer, Mar 04 '11 at 19:17
possible duplicate of [CSS styling of flash message](http://stackoverflow.com/questions/5190090/css-styling-of-flash-message) — the Tin Man, Mar 04 '11 at 21:56

gmedina · Answer 1 · 2011-03-04T19:36:28.123

0

well in your CSS the class is defined wrong:

.notice{}

it should be declared with an id selector (#) since you use an id (versus the class selector .)

#notice{}

Also, there is no flash class defined So in your CSS, just add something like this:

.flash{color:#F00}

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

edited Mar 04 '11 at 19:36

answered Mar 04 '11 at 18:38

gmedina

216
2
5

well, the updated CSS still missing something like this `.flash{}` – gmedina Mar 04 '11 at 19:28
well what should my CSS look like? that's what im asking – Justin Meltzer Mar 04 '11 at 19:30
check it out, added a flash class to the css http://jsfiddle.net/gmedina/uMCDM/1/ – gmedina Mar 04 '11 at 19:37
It's not quite so simple because some styling appears that shouldn't when there is no message. Would you mind taking a look at my code at https://github.com/meltzerj/sample_app – Justin Meltzer Mar 04 '11 at 19:50

score 0 · Answer 2 · answered Mar 04 '11 at 18:40

0

It´s hard to say without seeing the complete html and css, but if you are setting a style for your notice id like #notice {}, you can´t override it with the css you posted: .error, .alert, .notice, .success, .info {} as an ID has a higher value in the cascade than a class (100 vs 10 if I´m not mistaken).

To override settings from #notice you will need:

#notice .alert {
}
// etc.

answered Mar 04 '11 at 18:40

jeroen

91,079
21
114
132

yeah, i had posted the wrong CSS. I reposted the right CSS. the question may make more sense now – Justin Meltzer Mar 04 '11 at 18:52

score -1 · Answer 3 · answered Mar 04 '11 at 18:25

-1

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

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

answered Mar 04 '11 at 18:25

Will Ayd

6,767
2
36
39

well you could always try something like this: '<%= content_tag(:div, value, :class => "flash #{key}") %>' – Will Ayd Mar 04 '11 at 18:51
its a helper that will render the div that you have now. since your problem seems to be the div not rendering correctly this should do the trick if the problem is with your embedded ruby. worth a shot in any case – Will Ayd Mar 04 '11 at 18:56
what should this replace? should i get rid of the
?
– Justin Meltzer Mar 04 '11 at 19:01
no get rid of everything between <% flash.each %> and <% end %> and just put that there – Will Ayd Mar 04 '11 at 19:02
`value` is undefined, do you mean #{value} – Justin Meltzer Mar 04 '11 at 19:05
are you passing a flash message from your action? – Will Ayd Mar 04 '11 at 19:09
yeah, i set it in the controller – Justin Meltzer Mar 04 '11 at 19:14
might as well post your controller code then too. value being undefined hints at there being a problem sending that from the controller to the view – Will Ayd Mar 04 '11 at 19:15
you can check out my code at https://github.com/meltzerj/sample_app feel free to fork it – Justin Meltzer Mar 04 '11 at 19:22

Weird CSS conundrum

3 Answers3

Linked