IE6 input box doesn't work. How to fix?

Question

OK, Little background information here:

I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.

Please go here to see the problem: http://www.malahatautoparts.com/business-application/

The problems stems from an IE6 fix for the css background.

#main{
 background-position:-9999px -9999px;
 filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}

If I remove that from my ie6 css file, input box all of a sudden works. Any ideas on what I can use to fix this?

Answer 1

<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also http://stackoverflow.com/questions/263743/how-to-get-cursor-position-in-textarea.

Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).

Some excellent tips so you can get a uniform look & usage in all browsers.

Answer 2

The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.

The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.

There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.