Question

I have a registration form where this CSS rules apply. when user submits with incorrect or empty data in some required fields, we highlight the error field by a RED BORDER around the error field. This is not working in IE. The RED Border appears in FF and safari.

I have a code like this:

#errorMsg {
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    background:#FEE !important; 
    border:1px solid #C33; 
    color:#C33 !important; 
    font-size:110%; 
    font-weight:bold; 
    margin: 20px 0; 
    padding:15px; 
    text-align:left;
}

.parentError {
    background: #FEE; 
    border: 1px solid #C33; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -khtml-border-radius: 5px; 
    border-radius: 5px; 
    left: -10px; 
    margin-bottom: 10px; 
    padding: 10px; 
    position: relative; 
    top: 0px; 
    width: 635px;
}

[type=text].elementError, 
[type=password].elementError,
select.elementError {
    border: 2px solid #C33;
}

It works in Firefox 8 and Safari, but not in IE 8.

I am novice in CSS. Any help is appreciated.

Answer 1

In IE you can decide which css you want to present. You can also decide to present different css in different versions of IE.

You can Create an IE-Only Stylesheet

Example:

Target IE 8 and HIGHER:

<!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

This code will operate only in IE 8 and higher. means that you can create css file for 8 and higher. and a different file for lower version then 8.

This is just an example. This method give you a lot of power.

You can see this link.