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)