Question

I’m working on a website template and Internet Explorer is giving me a headache since I’m unable to display the search form field and button correctly. z-index in CSS is not doing much either.
By the way, how can I move the input area after the loupe icon?

Check the website here:
http://gabrielmeono.com/yonature/

Chrome:

In IE8:

Answer 1

Three things:

1. IE8 does not support border-radius, which is being applied to that field.
2. Your CSS references a file that’s missing, border-radius.htc which is for adding rounded corners in “all major browsers other than IE.”
3. You should be able to add a left padding value on the field to force the text further to the right. It may be safer to make a white, rounded container and position the search button and text field within it.

Edit: I was wrong; the border-radius (curved-corner) file should work for IE6-8.