Aligning Label and Input elements using ul and li

**richyrich** · richyrich, November 12th, 2009 09:47 AM

I've used this previously and it worked fine. However, in this case, the label and input box won't align vertically. This is when viewed in Design View of VS.

For some reason the Label text is lying slightly below the line of the textbox. I've tried adding a line-height to both, which helps to a degree, but it still doesn't look right to my eye. The text is still slightly below vertical alignment.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Ascent.login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="css/login.css" rel="stylesheet" type="text/css" />
    <link href="css/text.css" rel="stylesheet" type="text/css" />
    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <title>Login</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="holder">
        <div id="logo">
        </div>
        <div id="main">
            <div id="padlock">
            </div>
            <div id="content" class="size_10 bold blue_333399">
                THIS IS A SECURE SITE.<br />
                UNAUTHORISED ACCESS IS NOT PERMITTED
                <div style="text-align:top; vertical-align:middle;">
                    <ul id="login" class="input-fields">
                        <li>
                            <asp:Label ID="lblUserName" runat="server" Text="Username" />
                            <asp:TextBox ID="txtUserName" runat="server" CssClass="textbox" Width="200px" MaxLength="15" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

CSS

Code:

body
{
    width:100%;
    height:100%;
}

ul.input-fields
{
    width:100%;
    list-style-position: outside;
    list-style-type: none;
    margin: 0 auto 3px auto;
    padding: 0;
}
ul.input-fields li
{
    margin: 0;
    text-align:left;
}
ul.input-fields label, ul.input-fields span
{
    text-align:right;
    display: inline-block;
    min-width:15em;
    width: 40%;
}
ul.input-fields input, ul.input-fields select, ul.input-fields textarea
{
    margin: 2px 0;
}

input.textbox
{
    margin:0;
    border:solid 1px #CCCCCC;
    background-color: #EDF0FD;
}
#holder
{
    text-align:center;
    vertical-align:middle;
    width:50%;
    height:50%;
    border:solid 1px #CCCCCC;
}

#logo
{
    height:100px;
    width:357px;
    background-image:url('../images/logo.jpg');
    background-repeat:no-repeat;
}

#main
{
    margin:0;
    margin-top:20px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
}

#padlock
{
    margin-top:-20px;
    float:left;
    height:128px;
    width:90px;
    background-image:url('../images/padlock.png');
    background-repeat:no-repeat;
}

#content
{
    float:right;
    text-align:center;
}

Like I say, I've used this before and everything aligned fine.

Don't know if it's something I need to change with the holding div or what. If I just put text in the <li> it appears fine. As soon as I add a textbox control, the alignment goes.

Any ideas?

**Wolffy** · Wolffy, November 12th, 2009 10:46 AM

Hate to be a downer, but I NEVER use the designer in Visual Studio when building a page. Far too often, it mungs up the page or just never looks 'right'. Pretty much just roll my own in the editor and make sure it's pretty in FireFox.

**richyrich** · richyrich, November 12th, 2009 10:50 AM

Yeah. I did wonder if it might just be the design view. I never normally bother with it, but I thought I'd give it a go this time as I tend to test on the server which means uploading each time.

I now have it looking right in VS, so I guess that'll mean it'll look wrong when I actually test it in the browser...

btw, the CSS I used was:-

Code:

ul.input-fields
{
    width:100%;
    list-style-position: outside;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.input-fields label, ul.input-fields span
{
    float:left;
    text-align:right;
    width: 35%;
    padding-right:5px;
}
ul.input-fields input, ul.input-fields select, ul.input-fields textarea
{
    float:left;
    margin: 0;
}

which I found on http://woork.blogspot.com/2008/06/fo...-and-list.html

**Wolffy** · Wolffy, November 12th, 2009 10:52 AM

..more likely it will look different in IE, FF, Opera, Safari, Crome. Oh, and probably different in IE6, IE7, IE8...gonna love it.

**jmurrayhead** · jmurrayhead, November 12th, 2009 10:54 AM

Indeed...I NEVER use Design View in VS. Just open it in a browser...

**richyrich** · richyrich, November 12th, 2009 10:54 AM

Yeah, I know....Feckin' browsers!!

I've never yet got anything to look right in Chrome...

**richyrich** · richyrich, November 12th, 2009 10:55 AM

Yep, just loaded it in FF and it's all over the shop...LMAO...

**micky** · micky, November 13th, 2009 02:27 AM

Also what you'll see in VS design view will be similar in IE......... but might not in FF

**richyrich** · richyrich, November 13th, 2009 05:07 AM

Yep..Given up on VS design view...

Thread: Aligning Label and Input elements using ul and li

LinkBack

Thread Tools

Display

Aligning Label and Input elements using ul and li

Similar Threads

Aligning 2 divs with the 1 div above

Bold Label CSS problem

navigating records darkens label text in tab control

Form Design: Label in Header Control in details

Bookmarks

Bookmarks

Posting Permissions