Difficulties in styling CSS form

Question

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>

You forgot to include the <form class="contact"> opening tag and the </form> closing tag in your html code snippet. — Finbarr
– Finbarr, Commented Dec 1, 2010 at 13:24
There is no controversy concerning tables for layout. It just isn't done, period. — Rob
– Rob, Commented Dec 1, 2010 at 13:48
I'm aware that tables are a definite no-no when it comes to layout. I have however read that tables are still the logical option for tabulated data - and whether or not a form counts as such seems to be a grey area. — Jonathan
– Jonathan, Commented Dec 1, 2010 at 14:21
remember you are paid to get a result by the customer and if a table gets the result then a table is OK, privided it does not give your customer problems. Simple forms can work well in tables and the two columns (lables, values) does make sence from a logical stand point. — Ian Ringrose
– Ian Ringrose, Commented Dec 3, 2010 at 9:28

Finbarr · Accepted Answer · 2010-12-01 13:17:52Z

6

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;}

answered Dec 1, 2010 at 13:17

Finbarr

32.3k13 gold badges67 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Over a year ago

Brilliant! Thank you so much Finbarr, I've definitely learnt something there.

Finbarr Over a year ago

Yea, be careful with em measurements as they will trip you up.

weakish · Accepted Answer · 2010-12-01 13:20:59Z

0

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.

answered Dec 1, 2010 at 13:20

weakish

30.2k5 gold badges52 silver badges65 bronze badges

1 Comment

Jonathan Over a year ago

All sorted thanks to Finbarr's solution, thank you too for your help.

Benubird · Accepted Answer · 2010-12-01 13:26:09Z

0

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.

answered Dec 1, 2010 at 13:26

Benubird

19.7k28 gold badges97 silver badges148 bronze badges

1 Comment

Jonathan Over a year ago

All sorted thanks to Finbarr's solution, thank you too for your help.

Collectives™ on Stack Overflow

Difficulties in styling CSS form

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related