Question

I’m doing a minimal-style validation response for my login box. There’s not a lot of space, so I change “Login” to say “Invalid Login. Forgot Password?” in a nice fading animation. I had it working previously when I merely inserted “Invalid” before “Login” rather than fading out then in the entire span.

When it comes to my code, the former span doesn’t disappear and the latter span just shows up below, as if I am doing .show(). Also, no fading whatsoever occurs, which is odd.

Here’s my markup:

<span id="oldLoginProblem"><h3>Login</h3></span>
<span id="newLoginProblem" style="color: red; font-weight: bold;"><h3>Invalid Login &#183; <a href='recover'>Forgot Password?</a></h3></span>

Here’s the jQuery (this runs on validation error):

if(data == "Invalid")
            {
                $('#oldLoginProblem').fadeOut('slow', function(){
                    $('#newLoginProblem').fadeOut('slow', function(){
                        $('#newLoginProblem').fadeIn('slow');
                    });
                });
            }

Any help?

Answer 1

As noted in other answers, you cannot have a block element in an inline element (h3 in a span).

If you change your spans to inline-block, it works, but I don’t know if that has other consequences with regard to your layout.

span {
     display: inline-block;  
}