SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE not applying padding:right rule

    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/...new_jquery.htm

    The main CSS is here:

    http://www.handprintwebdesign.co.uk/...new_jquery.css

    And the rule is :

    Code:
    .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. #2
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could try to add :

    Code:
    overflow:hidden

  4. #4
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion - unfortunately that didn't fix it though.

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to say I resolved the issue by moving the down arrow to the left hand side:

    http://www.handprintwebdesign.co.uk/..._jquery202.htm

  6. #6
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Padding still isn't correct. It looks better tho! I guess some things just cant be fixed in a proper way with IE =(

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Enthusiast
    Join Date
    Dec 2011
    Posts
    60
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •