CODEWITHSUNDEEP
cssinternet-explorercross-browser
John Magnolia
John Magnolia

Reputation: 16793

IE css problems when styling form

This site works perfectly in Firefox, although in IE7 the contact form is not displaying correctly.

  1. Input/Textarea is not reading the background image and color properties (style.css line:273)

    #contact_form input, #contact_form textarea, #contact_form select {
  background: url("../images/input-bg.gif") repeat-x scroll left center #2E190B;
  border: 1px solid #FF8A00;
  color: #FFFFFF;
  padding-bottom: 5px;
  padding-top: 6px;
}

  2. Radio options for the "Send me a copy", in IE has a white background color (style.css line:280)

    #contact_form fieldset .checkbox input, #contact_form fieldset .radio input {
  background: none;
  border: none;
  display: block;
  float: left;
  padding: 0;
}

  3. Submit buttons, in IE these are white and no background image.

Upvotes: 0

Views: 1488

Answers (3)

lnguyen55
lnguyen55

Reputation: 737

All of these attributes has been overridden, but in IE, filter attribute is still in active

background: #F6F8F9;
background: -moz-linear-gradient(top, #F6F8F9 0%, #E5EBEE 50%, #D7DEE3 51%, #F5F7F9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F6F8F9), color-stop(50%,#E5EBEE), color-stop(51%,#D7DEE3), color-stop(100%,#F5F7F9));
background: -webkit-linear-gradient(top, #F6F8F9 0%,#E5EBEE 50%,#D7DEE3 51%,#F5F7F9 100%);
background: -o-linear-gradient(top, #F6F8F9 0%,#E5EBEE 50%,#D7DEE3 51%,#F5F7F9 100%);
background: -ms-linear-gradient(top, #F6F8F9 0%,#E5EBEE 50%,#D7DEE3 51%,#F5F7F9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );
background: linear-gradient(top, #F6F8F9 0%,#E5EBEE 50%,#D7DEE3 51%,#F5F7F9 100%);

background attribute and filter attribute can be together in IE, so set:

#contact_form .btn {
...
filter: none;
}

#contact_form input, #contact_form textarea, #contact_form select {
...
filter: none;
}

Upvotes: 1

Michał Wojciechowski
Michał Wojciechowski

Reputation: 2490

It seems the problems are caused by the filter property being defined for form elements, specifically in the .form input and .form textarea rules. Try removing those filter definitions.

Upvotes: 1

mlh
mlh

Reputation: 584

I see that your site uses jQuery.

Why don't you use one of the nice plugins to manage forms ?

Here, some of them are listed and linked.

Upvotes: -1

Related Questions