SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling a select box for IE8?

    I am wondering if there is a reliable way to style a select box that will work with IE7, 8 and 9.

    I currently have the following style applied to text boxes on my form and i would like the same effect on my select boxes.

    Code:
    height:28px;
    border:1px solid #999;
    line-height:28px;
    background-image:url(../PortalTemplate/images/textBox_bg.jpg);
    background-repeat:repeat-x;
    when i try to apply the same code to select or option it seems to do nothing in IE - although it works well in firefox.

    any ideas?

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    I am wondering if there is a reliable way to style a select box...
    Nope, give up
    Select elements are the hardest element to style consistently so people have stopped trying.

    I've started using the chosen select element replacement by harvest which you may prefer.
    http://harvesthq.github.com/chosen/

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    interesting you should mention the chosen plugin from harvest. that is actually why I am asking about this. I am currently using that plugin which is awesome but I have multiple select boxes on my form and am running into z-index issues in all versions of IE (all other browsers are fine).

    I actually posted on the developers page and he replied and said that it shouldn't do that in IE7+ but it clearly does. so my solution was to remove the chosen styling from all but a few selects on the page (which don't overlap), and then manually style the remaining selects to visually match so that they dont look to out of place.

    Have you had any experience with z-index issues in IE using the chosen plugin? I would love to just use chosen on all the selects on the page.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You can style very little of the select element in IE7 so you are pretty much stuck with the default settings. Also ie7 has a z-index bug and if the parent is positioned then the parent dictates the stacking context as it gets a z-index value of zero when it should have auto. This lead to a lot of stacking problems within pages as you have to make sure its the parent of the select that controls the stacking levels with other elements on the page.

    If you have overlapping issues then you will have to treat them on a cases by case basis to sort them out.


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
  •