Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Radio Buttons and Submit Button not Formatting Properly

    Hello everyone. I'm doing an assignment for college and I need some help getting my radio buttons and the submit button to line up properly and use the proper CSS rules I've given it. Here is the code:

    Code:
    <!DOCTYPE html>
    <html>
    
       <head>
       <!--
          New Perspectives on HTML and CSS
          Tutorial 6
          Review Assignment
    
          Red Ball Pizza Order Form
          Author: 
          Date:
    
          Filename:         order.htm
          Supporting files: delivery.png, formsubmit.js, full.png
                            left.png, modernizr-1.5.js, none.png, 
                            okay.png, pizzatxt.css, redball.css,
                            redball.png, regex.txt, right.png,
                            sizes.png, warning.png
    
       -->
    
          <meta charset="UTF-8" />
          <title>Build your own Pizza</title>
          <script src="modernizr-1.5.js"></script>
          <script src="formsubmit.js"></script>
    
          <link href="redball.css" rel="stylesheet" />
    	  <link href="pizza.css" rel="stylesheet" type="text/css">
    
    
       </head>
    
       <body>
    
          <header>
             <img src="redball.png" alt="Red Ball Pizza" />
             <nav>
                <ul>
                   <li><a href="#">home</a></li>
                   <li><a href="#">menu</a></li>
                   <li><a href="#">directions</a></li>
                   <li><a href="#">coupons</a></li>
                   <li><a href="#">orders</a></li>
                   <li><a href="#">catering</a></li>
                   <li><a href="#">reviews</a></li>
           </ul>
             </nav>
          
             <article>
                <h1>Online Ordering</h1>
                <p>Thank you for using our <em>online ordering</em>
                   form for quick and easy orders, delivered free, fast, and 
                   hot to your door. If you need to talk to us directly,
                   call Red Ball Pizza at (386) 555 - 7499.
                </p>
             </article>
          </header>
    
       <section>
          <p>Required values are marked by an asterisk (*)</p>
    	  
    	  <form id="pizza" name="pizza" action="http://www.redballpizza.com/cgi-bin/buildpizza"
    	  method="post">
    	  
    	  <fieldset id="custInfo">
    	  <legend>Customer Information</legend>
    	  
    	  <label for="custname">Name *</label>
    	  <input type="text" name="custname" id="custname" placeholder="First and Last Name" required="required">
    	  
    	  <label for="address">Delivery Address *</label>
    	  <textarea name="address" id="address" required="required">
    	  </textarea>
    	  
    	  <label for="phone">Phone *</label>
    	  <input type="text" name="phone" id="phone" placeholder="(nnn) nnn-nnnn" 
    	  pattern="^/d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{3}$" required="required">
    	  
    	  <label for="delTime">Delivery Time<br />
    	  (leave blank for immediate delivery)</label>
    	  <input type="text" name="delTime" id="delTime" placeholder="hh:mm AM/PM" 
    	  pattern="^([0-9]|1[012]]):[0-5][0-9]\s?((a|p)m)|(A|P)M)$">
    	  
    	  
    	  
    	  
    	  
    	  </fieldset>
    	  
    	  <fieldset id="buildPizza">
    	  <legend>Build Your Own Pizza</legend>
    	  <img src="sizes.png" id="sizeimage">
    	  
    	  <label for="size">Select Your Pizza Size<br /> (10, 12, or 14 inch)</label>
    	  <input type="range" name="size" id="size" value="12" step="2" min="10" max="14">
    	  
    	  <label for="crust">Choose Your Crust</label>
    	  <select name="crust" id="crust">
    		<option value="Thin">Thin</option>
    		<option value="Thick">Thick</option>
    		<option value="Stuffed">Stuffed</option>
    		<option value="Pan">Pan</option>
    	  </select>	
    	  
    	  <label for="quantity">Quantity<br /> (call for quantities larger than 10 pizzas)</label>
    	  <input type="number" name="quantity" id="quantity" value="1" step="1" min="1" max="10">
    	  
    	  <label for="instructions">Special Instructions</label>
    	  <textarea name="instructions" id="instructions"></textarea>
    	  
    	  <fieldset id="meat">
    	  <legend>Meat Toppings</legend>
    	  <label for="meat">Location</label>
    	  <img src="full.png" alt="full">
    	  <img src="left.png" alt="left">
    	  <img src="right.png" alt="right">
    	  <img src="none.png" alt="none">
    	  
    		<label>Pepperoni</label>
    		<fieldset id="Pepperoni" class="optionGroup">
    			
    			<input type="radio" name="pepperoni" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="pepperoni" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="pepperoni" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="pepperoni" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Ham</label>
    		<fieldset id="Ham" class="optionGroup">
    			
    			<input type="radio" name="ham" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="ham" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="ham" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="ham" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Pork</label>
    		<fieldset id="Pork" class="optionGroup">
    			
    			<input type="radio" name="pork" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="pork" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="pork" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="pork" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Sausage</label>
    		<fieldset id="Sausage" class="optionGroup">
    			
    			<input type="radio" name="sausage" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="sausage" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="sausage" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="sausage" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Chicken</label>
    		<fieldset id="Chicken" class="optionGroup">
    			
    			<input type="radio" name="chicken" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="chicken" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="chicken" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="chicken" id="oNone" value="None" checked="checked">
    		</fieldset>
    	  </fieldset>
    	  
    	  <fieldset id="vegetables">
    	  <legend>Vegetable Toppings</legend>
    	  <label for="vegetables">Location</label>
    	  <img src="full.png" alt="full">
    	  <img src="left.png" alt="left">
    	  <img src="right.png" alt="right">
    	  <img src="none.png" alt="none">
    	  
    		<label>Mushroom</label>
    		<fieldset id="Mushroom" class="optionGroup">
    			
    			<input type="radio" name="mushroom" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="mushroom" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="mushroom" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="mushroom" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Green Peppers</label>
    		<fieldset id="greenpeppers" class="optionGroup">
    			
    			<input type="radio" name="greenpeppers" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="greenpeppers" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="greenpeppers" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="greenpeppers" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Onions</label>
    		<fieldset id="Onions" class="optionGroup">
    			
    			<input type="radio" name="onions" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="onions" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="onions" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="onions" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Tomatoes</label>
    		<fieldset id="Tomatoes" class="optionGroup">
    			
    			<input type="radio" name="tomatoes" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="tomatoes" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="tomatoes" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="tomatoes" id="oNone" value="None" checked="checked">
    		</fieldset>
    		
    		<label>Jalapenos</label>
    		<fieldset id="Jalapenos" class="optionGroup">
    			
    			<input type="radio" name="jalapenos" id="oFull" value="Full">
    	  
    			
    			<input type="radio" name="jalapenos" id="oLeft" value="Left">
    	  
    			
    			<input type="radio" name="jalapenos" id="oRight" value="Right">
    	  
    			
    			<input type="radio" name="jalapenos" id="oNone" value="None" checked="checked">
    		</fieldset>
    	  </fieldset>
    	  
    	  <label for="doubleCheese">Add Double Cheese</label>
    	  <input type="checkbox" name="ddoubleCheese" id="doubleCheese" value="cheese">
    	  
    	  <label for="doubleSauce">Add Double Sauce</label>
    	  <input type="checkbox" name="doubleSauce" id="doubleSauce" value="sauce">
    	  
    	  </form>
    	  
       </section>
       
       <input type="submit" value="Next" id = "button" />
    
       <footer>
          <address>
             Red Ball Pizza &bull;
             811 Beach Drive &bull;
             Ormond Beach, FL  32175 &bull;
             (386) 555 - 7499 
          </address>
       </footer>
    
       </body>
    
    </html>
    ...and the CSS
    Code:
    /*
       New Perspectives on HTML and CSS
       Tutorial 6
       Review Assignment
    
       Pizza Order Style Sheet
       Author: 
       Date:
    
       Filename:         pizza.css
       Supporting Files: delivery.png, okay.png, warning.png
    
    */
    
    
    
    input [type="radio"] {
    width: 30px;
    float: left;
    }
    
    input[type="checkbox"] {
    width: 20px;
    }
    
    
    input:focus, select:focus, textarea:focus {
    background-color: rgb(220, 255, 220);
    }
    
    input:focus:valid {
    background-color: rgb(220, 255, 220) url("okay.png") bottom right no-repeat;
    }
    
    input:focus:invalid {
    background: rgb(255,232,233) url("warning.png") bottom right no-repeat;
    }
    
    fieldset {
    background-color: rgb(255, 246, 205);
    border: 1px solid rgb(233,69,0);
    float: left;
    margin: 1%;
    }
    
    #custInfo {
    width: 35%;
    }
    
    #buildPizza {
    width: 60%;
    }
    
    #meat {
    width: 47%;
    background-color: rgb(237, 178, 74);
    }
    
    #vegetables {
    width: 47%;
    background-color: rgb(237, 178, 74);
    }
    
    legend {
    font-size: 0.9em;
    }
    
    label {
    display: block;
    font-size: 0.8em;
    clear: left;
    float: left;
    width: 40%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 5px;
    }
    
    input {
    display: block;
    float: left;
    width: 50%;
    margin: 5px 0px 5px 0px;
    }
    
    textarea {
    display: block;
    float: left;
    width: 50%;
    margin: 5px 0px 5px 0px;
    height: 100px;
    }
    
    fieldset img {
    display: block;
    float: left;
    margin: 5px 0px 5px 0px;
    }
    
    fieldset.optionGroup {
    width: 50%;
    }
    
    
    
    #delTime {
    width: 150px;
    }
    
    #sizeimage {
    margin-left: 40%;
    }
    
    #size {
    width: 200px;
    background-color: transparent;
    }
    
    #crust {
    float: left;
    font-size: 0.8em;
    margin: 5px 0px 5px 0px;
    width: 150px;
    }
    
    #quantity {
    width: 40px;
    }
    
    #Pepperoni.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Ham.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Pork.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Sausage.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Chicken.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Mushroom.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #greenpeppers.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Onions.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Tomatoes.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    #Jalapenos.optionGroup {
    width: 50%;
    border-style: none;
    background-color: transparent;
    }
    
    input [type="radio"] {
    width: 30px;
    }
    
    input [type="checkbox"] {
    width: 20px;
    }
    
    form p {
    text-align: center;
    }
    
    inpit#button [type="submit"] {
    width: 150px;
    float: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    }
    My Questions
    1) Why are my radio buttons acting like that?
    2) Why is my Submit button not inheriting the CSS rules designated for it?

    In addition, please explain what my problem was and how it can be resolved, thanks.

  • #2
    New to the CF scene
    Join Date
    May 2014
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    NOTE: Just realized that I misspelled "input". Oops...
    I have an id attached to it though.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Don't use id="button" Give you input a different id like my_button.
    No spaces input#my_button [type="submit"] { S/B input#my_button[type="submit"] {
    This float: none; S/B clear:both;

    Your margins don't work. Don't know why yet.

    A heads up An ID is unique you can only have one.
    <input type="radio" name="pepperoni" id="oFull" value="Full">
    <input type="radio" name="ham" id="oFull" value="Full">
    and others.
    Last edited by sunfighter; 05-13-2014 at 05:15 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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