DropDown looks bad in IE

Hi.
Why DropDown and Button look bad in IE.
They look so in many sites, not only mine site.
Down arrow in DropDown moves left in IE.
And button name moves left too in IE.
Picture in attachment.

Hi Worldmaster ,

I just ran some quick tests with IE9 using the IE7, IE8 & IE9 browser modes and I don't see this.

Please post a link to the form so we can take a quick look.

Bob

For example this site:
http://demo.joomla-school.com/chronoforms.html
It isn't mine.
My site on localhost now.

Hi Worldmaster,

OK, thanks. It displays in IE8 only and is a result of the CSS

.form_element SELECT {
padding-right:10px;
}

in components/com_chronocontact/themes/default/css/style1-ie7.css

Bob

Thank you.

I changed in this file

.form_element SELECT {
padding-right:10px;
}

To

.form_element SELECT {
padding-right:0px;
}

DropDown in IE now looks good.

But Button in IE has no paddings now.
Before in IE it had only right padding.
In Opera before and now it has left and right padding and all ok.

I am not strong at HTML and CSS.
Can you tell me what and where to change that button in IE 8 would have left and right paddings, as it has now in Opera?

Hi Worldmaster,

Exactly what does this block of CSS look like now? I suspect that you may have deleted some lines that are needed. You should only change the one line from 10px to 0px

Bob

I changed only 1 line.
Delete only 1 symbol.

"padding:0px 10px 0px 0px;" --> "padding:0px 0px 0px 0px;"

Now this part of code looks:

.form_element select, .form_element input {
/*width:150px;*/
padding:0px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}

Before was:

.form_element select, .form_element input {
/*width:150px;*/
padding:0px 10px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;

}

I did all wright?

Hi Worldmaster,

That looks OK. So what button is now causing problems? A submit button?

Bob

Yes.
Submit button in IE doesn't have left and right paddings now.
In Opera looks good and has left and right paddings.

And else I want, that submit button will have the same design as buttons in my Joomla template.
How can I do it?

Hi Worldmaster,

It's very hard to tell without seeing the form. If you open the IE Developer tools with F12 then you can see the actual CSS that is being applied.

I suspect that you may need to divide the CSS into two parts and keep the padding for the input part

.form_element select {
  /*width:150px;*/
  padding:0px 0px 0px 0px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}
.form_element input {
  /*width:150px;*/
  padding:0px 10px 0px 0px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:14px;
}

Bob