CODEWITHSUNDEEP
htmlcssinternet-explorer
ep1033
ep1033

Reputation: 69

List Items in Unordered List Internet Explorer

I've read the w3c standard guides, and they state that for basic form creation, using a ul is superior to using a table. In Firefox, etc, the very simple code shown below creates simple text/input box pairs, in a list.

In internet explorer (Ie8, 9), the text boxes appear ~15px beneath and to the right of the spans.

enter image description here

Could someone explain to me why? What am I doing wrong?

<html>
<head>
    <style type="text/css">
        ul li input
        {
            width:70%;
            float:right;
        }
        ul
        {
            list-style: none;
            width:300px;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <span>Username:</span><input type="text" id="UserNameBox" />
        </li>
        <li>
            <span>Password:</span><input type="password" id="PasswordBox" />
        </li>
    </ul>
</body>

Upvotes: 0

Views: 281

Answers (2)

Vikdor
Vikdor

Reputation: 24124

If you want the inputs to float right, then the following HTML should work:

<body>
    <ul>
        <li>
            <input type="text" id="UserNameBox" /><span>Username:</span>
        </li>
        <li>
            <input type="password" id="PasswordBox" /><span>Password:</span>
        </li>
    </ul>
</body>

Upvotes: 1

Keith
Keith

Reputation: 1394

the <input> tag is self closing, your html syntax is wrong on the inputs. Try this:

<ul>
    <li>
        <span>Username:</span><input type="text" id="UserNameBox" />
    </li>
    <li>
        <span>Password:</span><input type="password" id="PasswordBox" />
    </li>
</ul>

Upvotes: 0

Related Questions