Forums

DropDown looks bad in IE

Worldmaster 22 Apr, 2011
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.
GreyHead 22 Apr, 2011
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
GreyHead 22 Apr, 2011
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
Worldmaster 22 Apr, 2011
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?
GreyHead 22 Apr, 2011
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
Worldmaster 22 Apr, 2011
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?
GreyHead 22 Apr, 2011
Hi Worldmaster,

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

Bob
Worldmaster 22 Apr, 2011
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?
GreyHead 22 Apr, 2011
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
This topic is locked and no more replies can be posted.