Create a valid CSS alert/noscript message

If used properly, alert messages guide a user to make the proper descicions on your site. Let it be the purchasing of a product or the task of enabling Javascript for full functionality. The problem is that most "styled" messages cause validation errors. Alert Message

Here’s an example of valid code used for an alert message telling the user to turn on Javascript : Here’s the image by Silk Exclamation

<style type="text/css">

.alert {

background: #fff6bf url(exclamation.png) center no-repeat;

background-position: 15px 50%; /* x-pos y-pos */

text-align: left;

padding: 10px 20px 10px 45px;

border-top: 2px solid #ffd324;

border-bottom: 2px solid #ffd324;

}

</style>

<script type="text/javascript">

<!–

document.write("Hello World!")

//–>

</script>

<noscript><p class="alert">Javasript is currently not supported/disabled by this browser. Please enable JavaScript for full functionality.</p></noscript>

 


Turn Off Javascript and refresh to see it in action below:

 

0 Responses to “Create a valid CSS alert/noscript message”


  1. No Comments

Leave a Reply