Comments on: Create a valid CSS alert message

By: Robert Hartl

Robert Hartl — Tue, 21 Aug 2007 01:52:19 +0000

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.

By: » 25 Code Snippets for Web Designers (Part4)

» 25 Code Snippets for Web Designers (Part4) — Mon, 13 Aug 2007 15:41:47 +0000

[...] CSS Alert Box - 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 [...]

By: loige

loige — Mon, 18 Jun 2007 08:03:21 +0000

Really good! I'm going to use it in some websites! ;)

By: Zoffix Znet

Zoffix Znet — Wed, 06 Jun 2007 01:30:16 +0000

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.

By: Bruce

Bruce — Fri, 25 May 2007 07:03:06 +0000

Doesn't work on Opera Browser (latest) and don't look cool in Safari.

No issues for me in Safari 2.0.4, or Opera 9.21 (Mac). Check your code.

By: Philippe

Philippe — Fri, 25 May 2007 06:58:46 +0000

@ The eye :
no it's working fine with Opera's latest version.
See by yourself. ;)

By: THE EYE

THE EYE — Fri, 25 May 2007 00:22:50 +0000

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!

By: Bruce

Bruce — Sat, 05 May 2007 08:16:01 +0000

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!

By: Josh P

Josh P — Sat, 05 May 2007 06:23:26 +0000

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%.

By: icerabbit

icerabbit — Thu, 26 Apr 2007 16:36:25 +0000

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 ;)