A bit of cleanup on the markup, putting the notices back on top.

browserid/views/signin.ejs

@@ -3,9 +3,11 @@
         <!-- XXX this form submits to nowhere -->
         <form id="signUpForm" class="cf authform">
             <h1 class="serif">Sign In</h1>
-            <div class="notifications">
-                <div class="notification error doh">Bad Login. Check your email and password.</div>
-            </div>
+
+            <ul class="notifications">
+                <li class="notification error doh">Bad Login. Check your email and password.</li>
+            </ul>
+
             <ul class="inputs">
                 <li>
                     <label class="serif" for="email">Email Address</label>
@@ -20,6 +22,7 @@
                     <input class="sans" id="password" placeholder="Your Password" type="password" required x-moz-errormessage="Oops!  We need your password to sign you in" tabindex="2">
                 </li>
             </ul>
+
             <div class="submit cf">
                 <div class="remember cf">
                     <div class="checkAlign">

browserid/views/signup.ejs

@@ -4,28 +4,26 @@
         <form id="signUpForm" class="cf authform">
             <h1 class="serif">Create Account</h1>
 
-            <div id="forminputs">
-                <ul class="inputs">
-                    <li>
-                        <label class="serif" for="email">Email Address</label>
-                        <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" x-moz-errormessage="Please enter the email address you would like to use">
-                    </li>
-                </ul>
+            <ul class="notifications">
+                <li class="notification error doh">Doh! Something went wrong :-( </li>
+                <li class="notification alreadyRegistered"><strong id="registeredEmail"></strong> is already registered. Would you like to <a class="signUpIn" href="/signin">sign in</a> instead?</li>
+                <li class="notification emailsent">A confirmation email has been sent to you at <strong id="sentToEmail"></strong>. Check it!</li>
+            </ul>
 
-                <div class="submit cf">
-                    <div class="remember cf">
-                        <a class="signUpIn" href="/signin">Existing account? Sign in.</a>
-                    </div>
-                    <input type="submit" class="create" value="Verify Email"/>
-                </div>
-
-                <ul class="notifications">
-                    <li class="notification error doh">Doh! Something went wrong :-( </li>
-                    <li class="notification alreadyRegistered"><strong id="registeredEmail"></strong> is already registered. Would you like to <a class="signUpIn" href="/signin">sign in</a> instead?</li>
-                    <li class="notification emailsent">A confirmation email has been sent to you at <strong id="sentToEmail"></strong>. Check it!</li>
-                </ul>
+            <ul class="inputs forminputs">
+                <li>
+                    <label class="serif" for="email">Email Address</label>
+                    <input class="sans" id="email" autofocus required placeholder="Your Email" type="email" x-moz-errormessage="Please enter the email address you would like to use">
+                </li>
+            </ul>
 
+            <div class="submit cf forminputs">
+                <div class="remember cf">
+                    <a class="signUpIn" href="/signin">Existing account? Sign in.</a>
+                </div>
+                <input type="submit" class="create" value="Verify Email"/>
             </div>
+
         </form>
     </div>
 </div>
@@ -34,7 +32,7 @@
   var ANIMATION_SPEED = 250;
 
   function replaceWithMessage(selector) {
-      $('#forminputs').fadeOut(ANIMATION_SPEED, function() {
+      $('.forminputs').fadeOut(ANIMATION_SPEED, function() {
         $(selector).fadeIn(ANIMATION_SPEED);
       });
   }