Caret / Cursor appears above textfields

On our site http://bit.ly/H1lqCy the cursor/caret appears above and to the left of the text field (and text areas). This only occurs in Internet Explorer (tested in IE8).
When text is typed it displays correctly in the textfield.
Any help is much appreciated.
peroskiAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
LZ1Connect With a Mentor Commented:
I'm not sure why, but it seems that the filter is what's misaligning the cursor.  And unfortunately I don't know what you should do to try and fix it. The only thing I would suggest is to make the shadow a background image from Photoshop or something and apply it that way. Generally you'd want to do that anyways.

If I removed the filters from the #sidebar-right .block it worked fine in all browsers.
0
 
LZ1Commented:
I don't see anything in the CSS that would do that.  However, you do have a webform.js call.  Try disabling that.  

If that doesn't work, then let's start disabling each script 1 by 1 to see if it's a JS thing.
0
 
peroskiAuthor Commented:
Thanks LZ1 - I disabled Javascript but the issue was still there. I then deleted all the css and it went away (along with all my styles) I started deleting chunks of css and narrowed it down to this

#main-content {
      filter:
      progid:DXImageTransform.Microsoft.Shadow(color='#B9B9B9', Direction=45, Strength=6)
      progid:DXImageTransform.Microsoft.Shadow(color='#B9B9B9', Direction=315, Strength=6);

If I delete the filter the text fields appear correctly however the shadows disappear and the major problem is that Firefox and Chrome break completely!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.