Good CSS for flashes (aka info messages in Rails, growls in OSX)

Question

I'm having difficulty getting CSS to work like I want it to for flashes (those little messages that show when you log in or do something or whatnot to confirm your action, eg in Rails).

I want it to:

• live within any arbitrary div
• look like a centered box with text in it
• be only as big as needed to fit the text (if less than specified max width) or wrap the text (if larger)
• have centered or left-aligned (or combination) text, depending on the flash (e.g. short errors are centered; longer how-to newbie intros are left-aligned); an extra CSS class (e.g. 'flash info left') to support this is OK
• play well with having multiple flashes on a page right next to each other (as in example)
• preferably consist of a single element w/ a class around the text, rather than text within an element within a wrapper element
• preferably be YUI CSS compatible and pure CSS (not JS)
• work right on IE7+, FFx 3+, Safari 3+; work 'good enough' on older browsers

Most of the CSS I've seen for this doesn't do one of those - e.g. most specify a fixed width, which means that either it gets wrapped poorly or it's got way too much padding.

How can I do this? (Or: Why can't I?)

Here's my current CSS:

<div class="flash info">
  <span class="close"><a href="AJAX callback">X</a></span>
  Some informational text here that can be closed w/ the X
</div>
<div class="flash error">
  Some other simultaneous error
</div>

.flash {
    text-align: center;
    padding: .3em .4em;
    margin:  0 auto .5em;
    clear:  both;
    max-width: 46.923em; /* 610/13 */  
    *max-width: 45.750em; /* 610/13.3333 - for IE */
}

.flash.error {
    border: thin solid #8b0000;
    background: #ffc0cb;
}

.flash.notice, .flash.info {
    border: thin solid #ff0;
    background: #ffe;
}

.flash.warning {
    border: thin solid #b8860b;
    background: #ff0;
}

.flash .close {
    float: right;
}

.flash .close a {
    color:    #f00;
    text-decoration: none;
}

Bonus points: I achieved what I want only partially with the tooltip code below; namely, it isn't capable of wrapping.

For some reason, unless nowrap or a width is specified, it defaults to being very small in width. I couldn't figure out why, or how to make it just wrap at a specific, wider width (like I want to happen w/ the flash).

Some text with <span class="tooltip">info <span>i can has info?</span></span> about a word

.tooltip {
  position: relative; /*this is the key*/
    background-color: #ffa;
}

.tooltip:hover{
    background-color: #ff6;
}

.tooltip span {
    display: none
}

.tooltip:hover span { /*the span will display just on :hover state*/
    z-index:  1; 
    display:     block;
    position:    absolute;
    top:      1.6em; 
    left:   0;
    border:   thin solid #ff0;
    background:  #ffe;
    padding:  .3em .6em;
    text-align:  left;
    white-space: nowrap;
}

Thanks!

• Sai

Answer 1

These are interesting attempts of notifications in Javascript, the first has a centered notification, maybe you can get inspiration from that.

Growl like (mootools)

ROAR (this one is really good)

Answer 2

I'll have to check out SleepyCod's recommendations. ROAR looks really good. On my Rails site, I use jGrowl (a jQuery plugin), and it's worked out well for me.

jGrowl Demo

Answer 3

This is a big question, but I'll try to break it up.

First, regarding your first three requirements, you're probably stuck unless you have the luxury of dictating your browser platform. In order to center a box within an arbitrary DIV on most browsers, you have to specify a width for the inner block element. It has to be a block element so that you can make it look like a box (coloring, border). You can get away without a width on browsers that support display: inline-block. If you wanted, you could try hacking around this with some script, setting a width based on how long the inner text is, up to some maximum.

Your next three requirements are at odds with each other. If you allow for multiple flashes, some centered and some left-justified, the justification alone requires that each flash be within its own block element so that you can apply the justification style.

It isn't obvious, but there is nothing holding to you to the example flash types of notice, warning or error. If you want to distinguish between those that should be centered (short errors) and those that should be left-justified (newbie intros), put them in the flash with different keys. Iterate through your flash, applying the necessary class name to get the desired styling for each key. If you must support more than one error message, then flash[:error] can be an array. I'd write helper methods to facilitate adding messages to the flash, so you have less conditional code in the views.

Answer 4

First, when looking for such styles you should call those popups "Growls". That's the name Apple uses, and it uses them quite aggressively, so that's the name you should look for.

Second, Roar's stylesheet is very accessible, why don't you download and copy it. While the popup is in JS, the generated script is pure html.

mootools, JQ, & Ext have their own Growl notification projects.

Third, if you just want to make your own, if you have the dimensions it will always be using, you are probably best making a graphic or two and just lining up text over their center.