SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Addict jodmcc's Avatar
    Join Date
    Dec 2003
    Location
    Houston, Texas
    Posts
    227
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with Form Positioning

    I have put a form together using FIELDSET and LEGEND tags and the form views how I would like in Safari and Mozilla 1.6 Mac, but it displays shifted to the right in IE 5.2 Mac. I am not sure what I need to do for it to display correctly.

    Thanks,

    John

    CSS:


    <style type="text/css">
    <!--
    body {
    background-image: url(yummybkgrd.gif);
    background-repeat: repeat-y;
    background-position: center top;
    }
    #container {
    margin: auto;
    text-align: center;
    }
    #banner {
    width: 720px;
    height: 128px;
    margin: auto;
    clear: both;
    }

    #nav {
    padding: 5px;
    text-align: center;
    clear: both;
    }
    #nav ul {
    margin: 0px;
    padding: 0px 0px 10px;
    list-style-type: none;
    }
    #nav ul li {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-style: italic;
    font-weight: bold;
    color: #000000;
    display: inline;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    }
    #nav ul li a {
    text-decoration: none;
    padding-top: .2em;
    padding-right: 1em;
    color: #4169E1;
    }
    #nav ul li a:hover {
    color: #763736;
    text-decoration: underline;
    }

    #col1cheese {
    width: 390px;
    padding: 0px;
    margin-left: 8px;
    float: left;
    text-align: left;
    }
    #col2cheese {
    width: 300px;
    margin-left: 10px;
    float: left;
    text-align: left;
    }
    #content {
    text-align: center;
    width: 720px;
    margin: auto;
    }

    img.cheesecake {
    float: left;
    margin-top: 0px;
    margin-right: 10px;
    margin-bottom: 80px;
    margin-left: 0px;
    }

    .cakelisttitle {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    color: #E1B941;
    font-weight: bold;
    font-variant: normal;
    }
    .cakelistdescription {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    color: #000000;
    margin-bottom: 8px;
    }
    dl {
    margin: 0px;
    }
    table#pricemenucheese {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    width: 300px;
    vertical-align: top;
    }

    .clearboth {
    clear: both;
    }
    td {
    padding-bottom: 20px;
    }

    h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 30px;
    font-style: italic;
    color: #ABBDF2;
    margin: 10px 0px;
    padding: 0px;
    }

    #details {
    width: 720px;
    text-align: center;
    margin: auto;
    }
    p {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    text-align: left;
    line-height: 15px;
    margin-bottom: 8px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    }
    #detailparagraphs {
    width: 500px;
    margin: 20px 110px 0px;
    }
    .phoneline {
    font-size: 18px;
    font-style: italic;
    color: #E141B9;
    text-align: center;
    }
    .blessing {
    font-size: 12px;
    font-style: italic;
    color: #E1B941;
    text-align: center;
    }

    .col1picture {
    float: left;
    width: 160px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 50px
    }

    .col1picture dt {
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    font-style: italic
    font-size: 9px
    }

    fieldset {
    margin: 0 .7em 2em .7em;
    padding: 1em .5em .5em .5em;
    border: 1px solid #000000;
    }

    legend {
    padding: 1em;
    background-color: #EBEBFF;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    border: 1px solid #000000;
    }

    input {
    border: 1px solid #000000;
    font-weight: bold;
    background: #F5F5F5;
    }

    .center {
    text-align: center;
    }
    -->
    </style>


    HTML:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
    <html>
    <head>
    <title>Noah's Ark Cake Order Form</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <div id="container">
    <div id="banner"><img src="yummydessertshead.jpg" alt="yummy desserts logo banner" width="600" height="128"></div>
    <div id="nav">
    <ul>
    <li><a href="index.html">Cheesecakes</a></li>
    <li><a href="poundcake.html">Pound Cakes</a></li>
    <li><a href="southernspecial.html">Southern Specialties</a></li>
    <li><a href="holiday.html">Holiday Extras</a></li>
    <li><a href="mailto:laura@yummy-desserts.com">Questions? Ask Me!</a></li>
    </ul>
    <ul>
    <li><a href="catering.html">Catering</a></li>
    <li><a href="noahsark.html">Noah's Ark Cakes</a></li>
    <li><a href="personchef.html">Personal Dessert Chef</a></li>
    </ul>
    </div>
    <div id="content">
    <form action="#" method="get" name="Noah's Ark Cake" id="Noah's Ark Cake">
    <h2>Noah's Ark Cake Order Form</h2>
    <fieldset>
    <legend>Message as it should appear on cake/legend><br>
    <p><label>Happy Birthday</label>&nbsp;<input type="text" name="happy_birthday" id="Happy_Birthday"></p></fieldset>
    <fieldset>
    <legend>Contact Information</legend><p><label>Name of person ordering the cake/label><input type="text" name="person_ordering" id="Person_Ordering"><br><label>Address/label>&nbsp;<input type="text" name="contact_address" id="Contact_Address"></p>
    <p><label>Contact Number/label><label>(before party)</label>&nbsp;<input type="text name="before_party_number" id="Before_Party_Number">&nbsp;&nbsp;<label>(day of party)</label>&nbsp;<input type="text" name="day_of_party_number" id="Day_Of_Party_Number"></p>
    <p><label>Date of party/label>&nbsp;<input type="text" name="date_of_party" id="Date_Of_Party">&nbsp;&nbsp;<label>Day of week/label>&nbsp;<input type="text" name="day_of_week" id="Day_Of_Week"><br><label>Time of party/label>&nbsp;<input type="text" name="time_of_party" id="Time_Of_Party">&nbsp;&nbsp;<input name="time" type="radio" id="AM" value="AM">
    <label>A.M.</label>&nbsp;&nbsp;<input name="time" type="radio" id="PM" value="PM">
    <label>P.M.</label></p>
    </fieldset>
    <fieldset><legend>Cake Details</legend><p><label>Cake flavor/label><br><input name="cake_flavor" type="radio" id="Vanilla" value="Vanilla">
    <label>Vanilla</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="cake_flavor" type="radio" id="Chocolate" value="Chocolate">
    <label>Chocolate</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="cake_flavor" id="Strawberry" type="radio" value="Strawberry">
    <label>Strawberry</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="cake_flavor" type="radio" id="Pineapple" value="Pineapple">
    <label>Pineapple</label></p>
    <p><label>Icing flavor/label><br><input name="icing_flavor" type="radio" id="Vanilla_Buttercream" value="Vanilla Buttercream">
    <label>Vanilla Buttercream</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="icing_flavor" id="Chocolate_Buttercream" type="radio" value="Chocolate Buttercream" Chocolate_Buttercream">
    <label>Chocolate Buttercream</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="icing_flavor" type="radio" id="Vanilla_Cream_Cheese" value="Vanilla Cream Cheese">
    <label>Vanilla Cream Cheese</label></p>
    <p><label>Optional filling ($10 additional charge)/label><br><input name="filling" type="radio" id="Raspberry_Filling" value="Raspberry Filling">
    <label>Raspberry</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="filling" type="radio" id="Lemon_Filling" value="Lemon Filling">
    <label>Lemon</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="filling" type="radio" id="Orange_Filling" value="Orange Filling">
    <label>Orange</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="filling" type="radio" id="Pineapple_Filling" value="Pineapple Filling">
    <label>Pineapple</label>&nbsp;&nbsp;&nbsp;&nbsp;<input name="filling" type="radio" id="Strawberry_Filling" value="Strawberry Filling">
    <label>Strawberry</label>
    <p><label>Size/label><br><input type="text" size="2" name="two-layer_half_sheet" id="Two-Layer_Half_Sheet">&nbsp;<label>2-Layer Half Sheet (serves 50) $45 (delivery is free!)</label></p>
    <p><input type="text" size="2" name="three-layer_half_sheet" id="Three-Layer_Half_Sheet">&nbsp;<label>3-Layer Half Sheet (serves 75) $60 (delivery is free!)</label></p></fieldset>
    <p class="center">
    <input type="submit" value="Place Order" label="Place Order">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Clear Form"></p>
    <p class="blessing">“May God bless you and keep you today and every day, and may you enjoy your desserts!”</p>
    </form>
    </div>
    </div>
    </body>
    </html>
    Attached Images Attached Images


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
  •