Difficulties in styling CSS form

With all the controversy surrounding tables as a layout option for forms, I开发者_开发问答've decided to go with an unordered list. I finally have the labels and elements displaying as I intend, however the 'note' div I've added refuses to line up with the inputs above it.

I've included the code below, please excuse the garish background colours I've chosen to help me judge placement! Does anyone have any suggestions as to why this the 'note' div refuses to play along? I'm sure there's a simple solution but I'm completely stumped. Thank you very much in advance.

form.contact label
{
    float: left;
    position: absolute;
    background: red;
}
form.contact input
{
    width: 200px;
    margin-left: 15em;
}
form.contact .note
{
    margin-left: 15em;
    width: 176px;
    background: yellow;
}
form.contact ul
{
    list-style: none;
    position: absolute;
    padding: 0;
}
form.contact ul li
{
    float: left;    
    clear: left;    
    width: 100%;    
    padding-bottom: 1em;
    margin-bottom: 10px;
    background: pink;
    left: 0;
}

<ul>
        <li>
            <label for="address1">Address Line 1:</label>
            <input name="address1" type="text" id="address1" />
        </li>
        <li>
            <label for="address2">Address Line 2:</label>

            <input name="address2" type="text" id="address2" /> 
        </li>
        <li>
            <label for="address3">Address Line 3:</label>
            <input name="address3" type="text" id="address3" /> 
        </li>
        <li>
            <label for="address4">Address Line 4:</label>
            <input name="address4" type="text" id="address4" /> 
            <div class="note">This is a note</div>

        </li>

        <li>
            <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
        </li>
    </ul>

Because the input and the div have a different font size by default, and using elastic layout with em measurements is affected by the size of the font.

This fixes it:

* {font-size: 12px;}

input is inline element and div.note is block element. Browsers' default css has different settings for inline elements and div.notes. I suggest you try to adjust magin-left and/or padding-left values of input and .note. You may also need to sepeficy font-size as Finbarr points out.

A couple of answers spring to mind. First, have you considered the defualt padding? I see you specify the margin, but if you haven't included a fixed padding level, the different elements might inherit it differently.

It would also be helpful if you could post a screenshot - the sample code you provided works perfectly for me when I test it in konqueror & firefox - so maybe its a browser issue?

...ok, I see weakish has already said pretty much the same thing while I was typing this. But, my screenshot comment stands; it would be helpful to see exactly what the error is, as you see it.