Solved

IE6 CSS issue with <select> tag

Posted on 2010-11-13
5
656 Views
Last Modified: 2012-05-10
I've just discovered that the Select elements on my site display terribly in IE6. The input fields look fine, but none of the styles seem to apply to the Select elements. The CSS style is:

#customForm input, select
{
    padding: 6px;
    color: #949494;
    font-family: Arial,  Verdana, Helvetica, sans-serif;
    font-size: 14px;
    border: 1px solid #cecece;
    width: 400px;
}

Is there any way to fix this?

0
Comment
Question by:bumbling_fool
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
5 Comments
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34128504
In IE we can't apply many of the CSS styles to SELECT element.
There are many JavaScript/jQuery based solutions that can be used as a replacement for SELECT. Try googling for one.
0
 

Author Comment

by:bumbling_fool
ID: 34128631
The style works in later versions of IE. Is it simply not possible in IE6?
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34128691
IE7 and earlier I believe. However I have faced some issues with select and file input element styling in IE8 also.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 34129438
You cannot style the border in IE6, it doesn't work --
http://stackoverflow.com/questions/380037/ie6-ie7-css-border-on-select-element

And most of the other styling you have applied to a select element won't work in IE 6 --
http://www.google.com/search?num=30&q=CSS+Select+IE6
0
 
LVL 3

Accepted Solution

by:
cloud-9 earned 500 total points
ID: 34129622
IE uses Windows selects, so they can't be styled very well in anything less than IE 8. When I have to support IE 6 or 7 with selects, I usually just have a special stylesheet that makes the font-size slightly large so the selects are at least the same dimensions.

Unless your sure more than 15% of your target audience is using IE 6, I would drop support for it. Even those statistics that favor IE show that less than 5% of total users use it. Thats the same percentage of users that don't use JS and/or Flash and have been ignored for years.

As mentioned there are plenty of JS solutions out there. Here are a couple:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://www.kaktus.cc/weblog/1192629359/

http://www.articlediary.com/article/jquery-multiselect-plugin-with-themeroller-support-284.html

JQuery UI is here: jqueryui.com

However, IE 6 has no support of CSS 2, so even these JS solutions may not work very well.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Adding 1 the value of input "text" every 3 seconds 5 33
Accordion won't close correctly 5 12
SVG and IE11 2 17
Link Anchor Not working 9 46
This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question