SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Chapter 7 - Build your own web site book

    I've been working through Ian Lloyd's Build Your Own Website The Right Way book using the Bubble Under example. I'm on chapter 7 and have hit a problem. In the 'Contact Us' form that has been created when i apply the label.fixedwidth class the layout of the form is all wrong. The labels should all be in line but in mine each label starts directly under the start of the text box above it. It's quite hard to explain but hopefully you get the idea. Heres the markup -

    <form action="" method="post" class="contact">
    <fieldset>
    <legend>Tell us about a dive event</legend>
    <div>
    <label for="contactname" class="fixedwidth">Contact Name</label>
    <input type="text" name="contactname" id="contactname"/>
    </div>
    <div>
    <label for="telephone" class="fixedwidth">Telephone Number</label>
    <input type="text" name="telephone" id="telephone"/>
    </div>
    <div>
    <label for="email" class="fixedwidth">Email Address</label>
    <input type="text" name="email" id="email"/>
    </div>
    <div>
    <label for="eventname" class="fixedwidth">What's the event called?</label>
    <input type="text" name="eventname" id="eventname"/>
    </div>
    <div>
    <label for="eventdate" class="fixedwidth">When's the event happening?</label>
    <input type="text" name="eventdate" id="eventdate"/>
    </div>
    </fieldset>
    </form>

    and also the CSS for the layout-

    form.contact label.fixedwidth {
    display: block;
    width: 240px;
    float: left;
    }

    Any ideas? I am viewing it in Firefox and also IE7 but there is no difference. The only thing i have noticed is when you go to Design view from Code view in my design software it kinda looks ok!
    Attached Images Attached Images
    Last edited by Midzer; Aug 3, 2009 at 12:02.

  2. #2
    SitePoint Evangelist
    Join Date
    Aug 2006
    Location
    Nantwich, Cheshire
    Posts
    444
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Can you post the whole of the CSS and HTML? Above looks OK, so maybe the problem is elsewhere.
    http://www.firenza.net - my homage to a car from the 1970s

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like all of your div elements have a float:left style.

    Can you post all your css so that we can take a look at it?
    Check out my web design blog.
    http://www.bolducpress.com


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
  •