Create a valid CSS alert message
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!
Posts
