html - Difficulties in styling CSS form -


with controversy surrounding tables layout option forms, i've decided go unordered list. have labels , elements displaying intend, 'note' div i've added refuses line inputs above it.

i've included code below, please excuse garish background colours i've chosen me judge placement! have suggestions why 'note' div refuses play along? i'm sure there's simple solution i'm stumped. thank 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 note</div>          </li>          <li>             <input type="submit" name="btnsubmit" value="submit" id="btnsubmit" />         </li>     </ul> 

because input , div have different font size default, , using elastic layout em measurements affected size of font.

this fixes it:

* {font-size: 12px;}


Comments

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

java - Android recognize cell phone with keyboard or not? -

iphone - How would you achieve a LED Scrolling effect? -