SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select Box / Drop Down Menu (I Give Up)

    Hi, i cannot seem to get my select box / drop down box working in all browsers... i have spent nearly a week trying to sort this and i cannot get it to work

    The drop down menu does not show correctly in google chrome (mac) or safari (mac) or IE7 (PC) (there seems to be a padding issue) HOWEVER it shows fine in firefox (pc) and firefox (mac)

    I have attached screenshots below of the problem and you can see my code on the following url: http://goo.gl/7XAIz

    screenshot.png

    I would be very grateful if someone could help me with this, as i just can't get it to work, thanks in advance for your help...

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,834
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Maybe you could try playing around with line-height. According to your screenshot, In Firefox the word "Gender" is vertically centered; in IE, it is not. I have never had such a problem with drop-down boxes. However, I did have this similar problem when trying to get text vertically centered in IE when it appeared just fine in Firefox. What I did was adjust the line-height. I don't remember if I added some top and bottom padding. Just try line-height and see what it gets you.

    Just an idea. I'm sure someone else will chime in.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks for your help... i will try this out when i get to my computer, thanks...

  4. #4
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but it didn't work

  5. #5
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,834
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by oo7ml View Post
    I tried that but it didn't work
    Then try padding.

  6. #6
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The inputs have a height of around 43px, so try declaring that on the select too.

    Code CSS:
    select {
        width: 394px;
        height: 43px;
    }

  7. #7
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    <select> elements are the most difficult element to style consistently in browsers. For this reason I simply don't change the border / padding / line-height on them and let each browser use the native styling.

    I've actually started using a js replacement for select elements http://harvesthq.github.com/chosen/ which you may also want to use.

  8. #8
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks... i will try this later, thanks

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by oo7ml View Post
    Cool, thanks... i will try this later, thanks
    If I remember correctly you can set the height for selects on webkit mac only if you have changed the background.

    e.g.
    select{height:43px;background:transparent}

  10. #10
    SitePoint Addict
    Join Date
    Sep 2011
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks, i am looking forward to trying this...


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
  •