Select box and IE6 bug

I know that IE6 is almost gone from the scene, but I just read somewhere that close to 2% of people world-wide are still using it.

This is how our search looks in most browsers:



But then when it comes to IE6 the select box looks like this:



I added a line-height and it does have a regular height of 30px, still it stays this way in IE6.

Any ideas how to work around the bug?

Thanks.

 

At a guess I would say that (along with changing the line height, as you've already done), change the font-size conditionally when it's IE6. Not an ideal solution, but sadly I don't think there is any other way with this browser.

Yes, unfortunately, IE6 is still kicking around (some government departments and corporates). One client's excuse is "security" (about 130,000 or so desktops/laptops). It made me laugh too.

 

No wonder I couldn't find any working solution to this on the internet... Bummer.

I'll just pour another glass of wine and relax then... Ahhhh...

 

Jealous!! I'm stuck at work (on night shift) for another few hours.

A good call after trying to get such stuff working properly in IE6. Although I would be in need of more than a couple of glasses.

 

you can select ie6 only using css property like this : _property:value simply by adding an underscore before property

 

Generally speaking attempting to style inputs is a disaster in older browsers -- BUT, there is a workaround you can use.

Instead of applying the borders and styling to the input and select, wrap them in span set to display:inline-block, style the span, then strip style off the inputs and select -- setting everything to vertical-align:middle;

A lot of times when elements don't receive styling in a consistent manner, your only choice is to strip styling and style something else instead -- works for LEGEND, works for LI... and it can work for INPUT and SELECT as well.

 

I wouldn't worry too much about it honestly. According to W3 as of October 2013 only 0.1% of the internet is still using Internet Explorer 6. And that number is rapidly decreasing everyday, it's not like your Google and have the whole internet viewing your site. It'd be a rare occurrence that your site is viewed in IE6 and even if they did see it it's a small error not really affecting the whole site. AND if they are using IE6 they are most likely used to seeing little things wrong with layouts across the internet as many websites gave up trying to please IE6 a while ago.

Source: http://www.w3schools.com/browsers/browsers_explorer.asp

 

I would be leery of using 'statistics' to justify it... My own sites numbers hover around 20% for IE6 -- so I would at least try and make the pages WORK; but pudge1 has it right that if it works, who cares about if it looks 'perfect' on older browsers. That's my own take on supporting IE8 and earlier at this point; I try to make sure everything works, but if it doesn't "look right" -- OH WELL. I use a LOT of CSS3 now and if they don't get rounded corners, box-shadows and gradients, who gives a ****... Likewise does that select WORK in that browser? If yes, great. The alignment is a little off, OH WELL.

You mean W3Schools, right? You do know they have NOTHING to do with the W3C and are one of the biggest pieces of disinformation on the web, right? Much less their target audience isn't exactly Joe six-pack an Susie sunshine, making their numbers (by their own admission) useless for tracking IE users?

http://www.w3fools.com/

Hell, look at NetApplications numbers, which mirror mine a hell of a lot more than all the other 'stats' used.
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1&qpcustomb=0

 

You are correct actually, I misread the URL when I Googled to find the statistics from it and didn't realize it was W3Schools and not W3C

 

Don't worry, a lot of folks make that mistake -- a lot of "experienced" and seasoned developers are under the delusion they are in fact affiliated. Fascinating phenomenon how sharing a few letters at the start creates 'transfer'; desired or otherwise. See "Java" vs. "JavaScript", which is a bit like "Ham" and "Hamburgers"

It's also easy to fall for the LIES of market share -- where people use IE's being at 20% according to statcounter, when their gathering methodology is questionable or even BLOCKED by IE8/newer when phishing block is on... The rapid decline of the past year being IE10's stricter blocks combined with a jump in devices (and therein users) online. You look at netApplications numbers, it's like nothing has changed.

Of course even using % is a giant lie since the size of the pool has changed -- you get the endless claims of how there are 'so many less' IE users today than there were at their peak of 92% market share, when that claim is 100% complete BULLSHIT if you can count. Can you count, suckers? I say the future is ours, if you can count!

Let's use netApplications numbers -- When IE had 95% of the market in 2004 there were approximately ~750 thousand Internet users... by todays netApplications numbers IE is down to 55%, but that's out of 2.8 billion people... meaning by their stats you're looking at them GAINING almost 800,000 users while 'losing' 40% market share.

Hell, even if you used todays alleged 28% average of all stats, at 2.8 billion that's 784 million users, STILL more than the 712 milllion in 2004. IE hasn't lost users, it's GAINED users.

But people will constantly quote that percentage to say otherwise.

Of course when you're talking about 1% or less of 2.8 billion, that's STILL 280 million potential users that you'd basically be telling to go **** themselves -- and that's the risk of being a 'percenter' -- using percentages to justtify being lazy, taking shortcuts, or to cover up ones own ignorance or ineptitude. Oh Opera users are only 3%, people on screen readers are less than 1%, IE6 users are barely 1%... people with javascript enabled is a small percentage, people browsing with images disabled is only a small percentage -- until eventually you've alienated EVERYBODY.

 

Can you be a bit more specific? Here's what I use to style it:

.input_drop_down {

      border: 1px solid #2369E0;
      height: 30px;
      margin: 0px 1px 0px 2px;
      padding: 3px 3px 3px 7px;
      line-height: 23px;
      vertical-align: middle;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      box-shadow: inset 2px 2px 4px -1px #888888;
      -webkit-box-shadow: inset 2px 2px 4px -1px #888888;
      -moz-box-shadow: inset 2px 2px 4px -1px #888888;
      -o-box-shadow: inset 2px 2px 4px -1px #888888;
}

Code (markup):

And the HTML looks something like this:

<select name="catid" class="input_drop_down">

<option value="0"> all categories </option>

</select>

Code (markup):

Thank you.

 

Those properties do work for some things, but not for a select box in IE 6/7. I used the things below and they didn't do anything.

*padding:3px 3px 10px 7px\9; /* IE 7 and below */
_padding:3px 3px 10px 7px\9; /* IE 6 */

 

Assuming this is from your quickad.com, you've got incomplete/broken markup, HTML 5 in your 4 tranny, and tags like CENTER and tables for layout -- things that have no business on any website written after 1997.

Where's your LABEL for that SELECT? Can one assume your INPUT also has no label as per that site? I mean, that site has inaccessible fixed metric (px) fonts and inaccessible fixed layout, and you're worrying about screwing around with rounded corners and a minor alignment issue in an old browser?

Your screenshot also makes no sense, as shouldn't your input have a plain appearance without rounded corners or inset shadows too? -- or are you using one of those broken garbage shim's I'm not seeing or something?

Generally speaking, rather than playing with trying to make that one SELECT perfect, I'd suggest axing the ENTIRE layout as a non-viable inaccessible mess and start over with semantic markup, separation of presentation from content, and on the whole dragging the codebase kicking and screaming out of the 1990's. You're throwing 2013 CSS at 1997 markup -- as even the first line of code proudly proclaims... HTML 4 Transitional, which is to say "in transition from 1997 to 1998 coding practices". It's no surprise you're having compatibility and layout issues (and I'm seeing FAR more than this one issue) -- much less the ridiculous page size where you have 4.8k of plaintext and not even a dozen content images, and you're wasting 90k of markup, 83k of scripting, 21k of CSS and a ridiculous 83 images totalling over 1.5 MEGABYTES to deliver it... (seriously, what the **** is up with the number of images and the total sizes?!?)

It's just another laundry list of how NOT to build a website for the modern era. The whole thing needs a good toss.

If you REALLY insist on it, just set the input, button and select in that form to vertical-align:middle; and be done with it. You don't get the fancy appearance in older browsers, OH WELL.

 

LOL. You know how to make people feel really small. But in some weird way, I am not even offended.

I posted that second image as an example only. I don't have a screen capture thing on that old computer that has IE6, so I had to doctor the same image just to make the point. The real image would have squared corners.

I totally agree with you, the design IS from that era, but believe it or not I like table tags. Tables are stretchable and can accommodate wide image ads posted by my visitors. The same goes for the center tag: 1. it works the same way across all browsers. 2. things will stay centered even when a wide image ad is posted by a visitor.

I tried to redesign the whole thing (twice I think) but went back to the old HTML simply because nothing else works as good as tables. And yes, it does need a good cleanup.

I'll try what you suggested sometime later. Thanks!

 

I am with Deathshadow as regards Internet Explorer 6 usage. Its global market share currently just under 5% worldwide, and amazingly persistent. I believe the majority of them are corporate users (hence important!) forced to use IE6 by their inflexible IT departments due to legacy applications. Love this relevant site:
http://www.ie6countdown.com/

 

At the end this is what I did to make it look more or less like it belongs there:

*font-size: 15px;
*margin-top: 5px;
*background-color: #E5F0FF;

Code (markup):