Reputation: 375

Textfield in hover is not working properly in IE

I'm having trouble with developing in IE, I've made a great header, but now I was checking everything in Internet Explorer and I've found a few bugs,

One is the following, I've never had something like this, that's why I'm really obsessed with this problem. I'm not even sure if anyone knows how to fix this, accept the challenge!

I know placeholder DOESNT work in IE, but that's obviously not the problem. If you are in the hover, and you're going over the text field, the box disappears, and you need to go over it again.

Here some code:

<ul>
    <div class="transparant">
        <div class="dropbox">
            <div class="login">
                <div class="textfield">
                     <form method="post">
                       <input id="textfield_post" type="text" name="username" placeholder="Gebruikersnaam" class="matrix"/>    
                </div>
            </div>

            <div class="pass">
                <div class="textfield">
                    <input id="textfield_post" type="password" name="password" placeholder="Wachtwoord" class="matrix"/>   
                </div>
            </div>

            <div class="loginbutton">   
                <input type="submit" class="btn" value= "Login" type="button" id="login_button"></form>
            </div>

            <div class="forgotpass">
                <a href="#" onclick="NewPassword()">Forgot password?</A>
            </div>
        </div>
    </div>
    </div>
</ul>

I think it is because of the z-index. Also, I don't want to use jquery or anything, I just want to fix the problem using right HTML & CSS.

I'm asking you if anyone is familiar with this problem,

The website: (it is only at IE 7&8)

Thanks for reading;)

Upvotes: 8

Answers (3)

GaneshKumar

Reputation: 159

IE currently Does not support Placeholder.i recommend you to move with JQuery. here is the sample code

<p><script type="text/javascript">
    $(function () {
        if (!$.support.placeholder) {
            var active = document.activeElement;
            $(':text').focus(function () {
                if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                    $(this).val('').removeClass('hasPlaceholder');
                }
            }).blur(function () {
                if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                    $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
                }
            });
            $(':text').blur();
            $(active).focus();
        }
    });
</script>
</p>

Hope it helps

Upvotes: 1