IE is forcing inline styles to override my Jquery magic?

Question

Ok so I have a neat little login form on my site, and I love placeholder instead of labels! As you all know, Microsoft, even know it has tremendous resources, refuses to release a full CSS3 HTML5 compatible browser. They're even so greedy they don't allow old users to upgrade to 9 unless they have Windows Vista/7 ---end IE rant

So I'm using the fake password field trick I read here in another post, but I'm having an issue! When I try to make the fakepassword field appear and hide the password, it appears that IE is forcing some kind of bogus inline style on the element, and not allowing it to hide!

Here's the code:

//This function hides our fake password field and changes focus to the real one. Yet another IE workaround...
$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
//These functions perform the link hover copycat
$("#titleHover").mouseenter(function(){
    $("#titleLarge").css('background-color', '#555');
});
$("#titleHover").mouseout(function(){
    $("#titleLarge").css('background-color', 'transparent');
});
$("#titleHover").click(function(){
    $("#userMenu").animate({
        height: "192px",
    }, 250, function() {
        // Animation complete. Display form and swap out arrow.
        $('#loginForm').css('visibility', 'visible');
        $("#titleLarge").css('background-color', 'transparent');
        $("#titleHover").unbind('mouseenter').unbind('mouseout');
        //Use my sweep function to swap in values for IE
        $('html').click(function() {
            //Hide the login, animate menu up and swap back in down arrow.
            $('#loginForm').css('visibility', 'hidden');
            $("#userMenu").animate({
                height: "64px",
            }, 250, function() { 
                $("#titleHover").mouseenter(function(){
                    $("#titleLarge").css('background-color', '#333');
                });
                $("#titleHover").mouseout(function(){
                    $("#titleLarge").css('background-color', 'transparent');
                });
            });
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }                       
        });                     
        $('#userWrap').click(function(event){
            event.stopPropagation();
        })
    });
});

And an image of the IE debug:

What in the heck is that^^^

Answer 1

Well after getting lots and lots o' practice with Jquery tonight, I fixed my issue by adding a little more logic to the script. The problem I was having had to do with how my script that fakes the replacement with IE works. It assigns the placeholder text to the value and changes the color. By adding the same logic to how the fake input is swapped in and out, I was able to fix the problem. In the future, I think I'm just going to use placeholders for the text! Simple logic: if the user hasn't yet focused or typed anything, the placeholder is visible. Should work in every browser! These are the show/hide functions now:

$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
$("#password").focusout(function(){
    if ($('#password').attr('value') == $('#password').attr('placeholder')) {
        $('#password').hide();
        $('#fakepassword').show();
    }
});

Answer 2

You can use jQuery to clear the inline style. It's big hammer, maybe too big for this case.

$('.myDiv').attr('style','')