CSS Alert Messages

Create a valid CSS alert message

By Bruce on April 1, 2006 in Internet. 32 responses Tags: css, howto, Internet, webdev, wordpress.

In various places around the net you may have seen alert boxes which, as far as I can tell, owe their origins to the K2 template for WordPress. The CSS behind this (at least in the beta 167 version I based my design on) doesn't pass the W3C's CSS Validator.

One of the K2 authors, Michael Heilemann from Binary Bonsai, uses the alert with a background image to emphasize the nature of the message (an exclamation from the Silk icon set).

The CSS Validator doesn't like it:

.alert {
 background: #fff6bf url(bioneural/exclamation.png) 15px center no-repeat;
 text-align: left;
 padding: 5px 20px 5px 45px;
 border-top: 2px solid #ffd324;
 border-bottom: 2px solid #ffd324;
 }

A Google search on background positioning in CSS lead me here, and I was able to implement a fix:

.alert {
 background: #fff6bf url(bioneural/exclamation.png) center no-repeat;
 background-position: 15px 50%; /* x-pos y-pos */
 text-align: left;
 padding: 5px 20px 5px 45px;
 border-top: 2px solid #ffd324;
 border-bottom: 2px solid #ffd324;
 }

The background image is thus indented by 15 pixels, and positioned vertically half way down the alert paragraph. To create an alert message in your post, insert a paragraph with the class "alert":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Here's an example:

This passes the CSS Validator. It works as expected in Safari, Firefox, and Internet Explorer.

Tip: It makes a great "noscript" message for users who have disabled JavaScript. If you turn off JavaScript and refresh the page you should see an alert in the sidebar about missing functionality!