Question

[Horizontal Login Form] …they wouldn’t let me post a pic 🙁

<!--
{Header}  {Email Input field} {Password Input field}  {Login Button}
                              {Forgot Password?} (..link is below Password field)
-->

Does anyone know how to make this form to look decent in all browsers, using standards compliant html and css? I need the span elements with a class of “Label” to overlay the input elements, and I need the Forgot Password to be positioned beneath the Password Input field and aligned to its left edge. I have a feeling there is a bulletproof way to write the markup and the css, but I’m just not seeing it. Here is what I have so far:

[HTML]

<div id="login" class="section">
    <div class="header">
        <h1 class="non-display">APPROVED MEMBERS</h1>
    </div>
    <form class = "Fields">
        <fieldset class = "UserName">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "text" />
            </label>
        </fieldset>
        <fieldset class = "Password">
            <label>
                <span class = "Label"></span>
                <input class = "Value" type = "password" />
            </label>
        </fieldset>
        <input class="Login" type="button" value="LOG IN"/>
        <a class="ForgotPassword" href="#">Forgot Password?</a>
    </form>
</div>

[CSS] using Less.js

.header {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1; /* inline-block hack for IE7 */
    *display: inline; /* inline-block hack for IE7 */

    h1 {
        padding: 1em 0;
        width: 400px;
        text-align: center;
    }
}

.Fields {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;

    .Label {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Value {
        display: inline;
        margin-left: 5px;
        padding-left: 5px;
    }

    .Login {
        position: relative;
        padding: 2px 7px;
        .input-button(#fff);
    }

    .ForgotPassword {
        position: absolute;
        top: 35px;
        right: 150px;
        text-decoration: none;
    }
}

Its close, but the “Forgot Password?” has proven extremely difficult to align to the left edge of the Password field. I’m using Less.js to write more concise css and make use of variables and mixins, but feel free to write any solution you have in straight css.

Thanks for the help!

UPDATE:

Thank you to the two people who submitted an solution. But I decided to keep the markup that I have and use a new technique that looks to hold a lot of promise: Responsive Web Design. I think the idea was first proposed by Ethan Marcote. It allows for precise, proportional layouts, using percentages based off of fixed width ratios. It makes a lot of sense from a design perspective. You owe it to yourself and your clients to check into this, its flat out brilliant.

Answer 1

I’m not sure how rigidly you have to stick with your HTML structure, but the main issue is that the ‘Forgotten password?’ link is not associated semantically with the password field in your HTML. This will make it incredibly difficult to position, and even worse to handle when you have to make changes to the form.

I have made a few small (:P) changes to both your HTML and CSS; you can have a look at my jsfiddle here.

You’ll notice I’ve replaced all your fieldset tags with a ul and li tags, and moved your link into the same li as the password field.

EDIT: In fact here’s the same layout you described in the beginning of your question: http://jsfiddle.net/Larry/5m5Sf/5/