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":
<p class="alert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>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!
Very beautiful. Thank you.
The first however is valid CSS - the CSS Validator is pretty damn buggy (still!) so it can't be trusted too much in edge cases, which this is.
Great example and very usable. On top of that, it's very customizable to match just about any client's web color scheme. Thank you.
Very nice tutorial, thank'you. bookmark this :}
@ Gregory: pixel position and the keyword center is not allowed per the CSS 2.1 specs. To quote http://www.w3.org/TR/CSS21/colors.html#propdef-background-position : "For combinations of keyword and non-keyword values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value".
The bioneural/exclamation.png doesn't look quite in IE, you can see the square around it......
Brent, I'm just guessing but here goes. You're using an IE6 or earlier which doesn't support the alpha transparency in 24bit png files. That's why a grey box appears around the image.
Thanks a lot, dude.
Nice. Very nice !
But what about the script for detetction Javascript ?
Which one do you use ?
Thanks for any answer.
Have a nice day. :)
Philippe, no script is necessary for a browser to detect whether JavaScripting is available or not. Just use the standard noscript syntax, giving the paragraph within the noscript container a class of "alert", for example.
Hello Bruce and thanks for your answer.
It's working great : a kind of magic for me :)
This was Philippe from Paris, France. ;)
Nice, I can't wait to integrate this into MY site.
thx, i like it :-)
I just ran the code through the validator, and it doesn't come up with an error. I know this is an older post, but is the fix still necessary?
You're right Steven—well spotted! The current W3C validator does accept both Michael's original and my modified CSS. Such changes in validator status go the other way too e.g. text-shadow: black 0.2em 0.3em 0.2em; was valid in CSS 2.0 but not in 2.1 draft, which the validator now uses by default.
I guess the lesson is that the validator alone does not give the final answer.
How exciting to accidentally find my way onto bioneural through the 53 CSS techniques article. Super.
I've implemented something similar for a friend a couple years ago. Works pretty cool with a browser check too, to alert IE users to switch to FireFox ;)
Eh, maybe I'm missing something (it's pretty late here after all)...but why could you not have just done the 15px 50% from the start? I'm not really following why you need both "center" AND 50%.
Josh, you are correct. The "center" in the first line of the "fix" is redundant, and the following is also valid (and even IE6-friendly):
.alert {
background: #fff6bf url(bioneural/exclamation.png) 15px 50% no-repeat;
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
When I wrote this post more than a year ago I did not appreciate that the only reason Michael's code wasn't validating was actually down to the validator, so the whole thing is somewhat moot. That this obsolete post got noticed so late in the piece is a historial quirk!
Very usefull, very nice, but here is an alert to you:
Doesn't work on Opera Browser (latest) and don't look cool in Safari.
Thank you!
@ The eye :
no it's working fine with Opera's latest version.
See by yourself. ;)
No issues for me in Safari 2.0.4, or Opera 9.21 (Mac). Check your code.
I just wanted to point out that text-align: left; is redundant unless you have a "nonstandard" direction or set text-align to something else in some ancestor.
Really good! I'm going to use it in some websites! ;)
Arghh, I've downloaded the K2-Theme only to find how this boxes are made (thought about widgtes or javascript). Now I read here that it's just a so simple CSS. Tss, thanks a lot (I'm TXP-user). Thank You.
Maybe the editor kills the class for p.