SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Having trouble lining up labels for form

    Why aren't my labels lining up with my form fields? It seems to work on the other site I used it on, but I can't seem to make it work for this site.

    http://www.jameswebdevelopment.com/c...newsletter.php

    Here is my css...

    Code:
    body, html {margin : 0 auto; padding : 0; background-color : #333; color : #FFF; text-align : center;}
    body {min-width : 800px;}
    /* First Layer */
    #container {width : 798px; padding : 10px 0; margin : 0 auto; text-align : center;}
    #updates {width : 300px; margin-left : auto;}
    #taskbar {width : 799px; clear : both; float : left; background-color : #FF6600; color : #FFF; border : 1px solid #444;} 
    #slideshow {width : 300px; float : left; margin : 10px 0; padding : 0; border : 1px solid #000;}
    #content {width : 470px; height : 484px; float : right; background-color : #000; padding : 0 10px; margin : 10px 0; border : 1px solid #000; overflow : auto; text-align : left; font-family : Arial, Verdana, sans-serif; font-size : 0.8em;}
    #copyright {width : 490px; clear : both; float : right; padding : 10px 0; text-align : center; font-family : Verdana, sans-serif; font-size : 0.6em;}
    /* Helpers */
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    .left {float : left;}
    .right {float : right;}
    img {border : 0; padding : 0; margin : 0;}
    img.title {float : left; border-bottom : 1px solid #000;}
    img.press {float : left; padding-right : 10px;}
    .slideshow {float : left;}
    div.photo_calendar {padding-top : 10px;}
    p.phototitle {width : 300px; font-family : Arial, Verdana, sans-serif; font-size : 0.8em; padding : 0; margin : 0;}
    p.shaded {background-color : #1E1E1E; padding : 5px;}
    /* Taskbar */
    #taskbar ul {list-style : none; padding : 0; margin : 0;}
    #taskbar ul li {display : inline; padding : 0; margin : 0; float : left;}
    #taskbar_home {width : 113px; height : 26px; border : 1px solid #000;}
    #taskbar_home a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/home_off.gif");}
    #taskbar_home a:hover, #taskbar_home a.focus {background : url("../pics/taskbar/home_on.gif") no-repeat 0 0;}
    #taskbar_calendar {width : 113px; height : 26px; border-top : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_calendar a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/calendar_off.gif");}
    #taskbar_calendar a:hover, #taskbar_calendar a.focus {background : url("../pics/taskbar/calendar_on.gif") no-repeat 0 0;}
    #taskbar_bio {width : 113px; height : 26px; border-top : 1px solid #000; border-right : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_bio a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/bio_off.gif");}
    #taskbar_bio a:hover, #taskbar_bio a.focus {background : url("../pics/taskbar/bio_on.gif") no-repeat 0 0;}
    #taskbar_press {width : 113px; height : 26px; border-top : 1px solid #000; border-right : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_press a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/press_off.gif");}
    #taskbar_press a:hover, #taskbar_press a.focus {background : url("../pics/taskbar/press_on.gif") no-repeat 0 0;}
    #taskbar_photos {width : 113px; height : 26px; border-top : 1px solid #000; border-right : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_photos a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/photos_off.gif");}
    #taskbar_photos a:hover, #taskbar_photos a.focus {background : url("../pics/taskbar/photos_on.gif") no-repeat 0 0;}
    #taskbar_listen {width : 113px; height : 26px; border-top : 1px solid #000; border-right : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_listen a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/listen_off.gif");}
    #taskbar_listen a:hover, #taskbar_listen a.focus {background : url("../pics/taskbar/listen_on.gif") no-repeat 0 0;}
    #taskbar_contact {width : 113px; height : 26px; border-top : 1px solid #000; border-bottom : 1px solid #000; border-right : 1px solid #000;}
    #taskbar_contact a {display : block; width : 113px; height : 26px; text-indent : -2000em; background-image : url("../pics/taskbar/contact_off.gif");}
    #taskbar_contact a:hover, #taskbar_contact a.focus {background : url("../pics/taskbar/contact_on.gif") no-repeat 0 0;}
    /* Calendar List */
    ul.calendar {list-style : none; background-color : #1E1E1E; padding : 5px; margin : 10px 0; font-family : Arial, Verdana, sans-serif; font-size : 1.0em;}
    ul.calendar li.dateplace {color : #FF6600; font-weight : bold;}
    /* Music List */
    ul.music {list-style : decimal;}
    ul.music li {padding : 3px 0;}
    /* Photos List */
    ul.photos {list-style : none; padding : 0; margin : 0;}
    ul.photos li {width : 100px; display : inline; float : left; text-align : center; padding : 10px 5px; margin : 0;}
    /* Photopages List */
    ul.photopages {list-style : none; padding : 0; margin : 0;}
    ul.photopages li {text-align : center; padding : 10px 0;}
    ul.photopages li img {border : 1px solid #FF6600;}
    ul.photopages li p {text-align : center; width : 450px; font-family : Arial, Verdana, sans-serif; font-size : 0.9em; padding : 0; margin : 0;}
    /* Newsletter Form */
    form {clear : both; background-color : #1E1E1E; padding : 10px; margin : 10px 0;}
    form h2 {padding : 0 0 10px 0; margin : 0;}
    form.formrow {clear : both; padding : 10px 0;}
    form label {float : left; width : 100px;}
    span.formrc {float : right; text-align : left; width : 300px;}
    form div.spacer {clear : both;}
    ul.formlist {list-style : none; margin : 0; padding : 0;}
    span.error {color : #FF0000; font-weight : bold;}
    /* Headings */
    h1 {font-family : Arial, Verdana, sans-serif; font-size : 1.5em;}
    h2 {padding : 0 0 2px 0; margin : 0; font-family : Arial, Verdana, sans-serif; font-size : 1.4em;}
    /* Links */
    #content a {color : #FFF;}
    #content a:hover, #content a:focus {color : #FF6600;}
    #copyright a {color : #FFF;}
    #copyright a:hover, #copyright a:focus {color : #FF6600;}

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Location
    Los Angeles CA
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikesBarto2002 View Post
    Why aren't my labels lining up with my form fields?
    Could you be more specific? How should they be lining up exactly? You probably won't have to float both the label and span that contains the input tag...but it's hard to say at this point.

  3. #3
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am assuming you fixed this issue? As they appear to line up for me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •