IE not applying padding:right rule

HTML & CSS
1

Not sure what’s going on here. I have some drop down select boxes that I’m trying to apply some right hand padding to, but its not being applied in any version of IE.

If I apply top, bottom, left and right padding, the other three are fine, which makes it all the more odd, as presumably IE is seeing the CSS correctly.

The page is here:

http://www.handprintwebdesign.co.uk/coverage/coverage_new/penny3/coverage_new_jquery.htm

The main CSS is here:

http://www.handprintwebdesign.co.uk/coverage/coverage_new/penny3/Template/JQuery/coverage_new_jquery.css

And the rule is :


.selectbox
{
  margin: 0px 0px 0px 0px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size:12px;
  color:#FFF;
  width : 167px; /* Resize Width */
  display:block;
  background-color:#999;
  
  cursor: pointer;
  border:1px solid #D1E4F6;
  height:20px;
  z-index:10;
}

If anyone can spot what’s causing this that would be much appreciated, as its been driving me nuts!

Thank you. (and Happy Christmas!)

2

As an example, select Argentina from the first selectbox, and the operator shown below (Personal (Telecom Argentina), Argentina) has the right padding applied in any browser other than IE, but doesn’t in IE, where it runs right to the edge of the box.

3

You could try to add :

overflow:hidden
4

Thanks for the suggestion - unfortunately that didn’t fix it though.

5

Just to say I resolved the issue by moving the down arrow to the left hand side:

http://www.handprintwebdesign.co.uk/coverage/coverage_new/penny3/coverage_new_jquery202.htm

6

Padding still isn’t correct. It looks better tho! I guess some things just cant be fixed in a proper way with IE =(

7

What issue are you still seeing with the padding?

I know the text runs all the way to the right hand side in IE and ideally would have a little padding there, but I think its something I can live with…

I guess I could try to fix that with a background image in the containing <DIV>, but it’ll probably turn into a pain getting it to line up everywhere!

8

Actually - is it the drop down lists appearing shunted to the right of the initial row with the arrow? I had thought that was only in IE7, but now looks like its in all the IEs.

9

OK - a negative margin-left value seems to have fixed that misalignment - in IE7 and 8 at least. (IE9 on my virtual box (I’m on a Mac) has died)