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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    99
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Positioning radio buttons

    Hi, I have a form located here http://pcwithers.byethost7.com/CareGuideSubmit.htm

    this does open in a smaller window when accessed from a link on the website.

    The problem is that on Step2 of the form, the radio buttons and labels do not display properly. I need them all aligned left. I have tried doing this in css, but am making an error somewhere.

    Here is the relevant form code

    Code:
    	<fieldset id="Care Guide Step 1" class="hidden" title="Care Guide Step 1">
    		<legend>Care Guide Step 1</legend>
    		<ol>
    			<li>
    <input type="radio" name="fishtype" value="cichlids" /> Cichlids
    <input type="radio" name="fishtype" value="tropical" /> Tropical fish
    <input type="radio" name="fishtype" value="marine" /> Marine fish
    <br/>
    <label for="fishtype">Common Name *</label>
    <select name="speciesChoice">
       <option value="">--choose one--</option>
    </select>
    And this is what I have done in css

    Code:
    #careGuideSubmit ol li radio {
    	display: inline;
    	padding: 5px;
    	margin: 0 auto;	
    	outline: none;
    	border: 1px solid #999;
    	float: left;
    }
    Can someone please tell me what I am doing wrong?

    Many Thanks

    Paul

  • #2
    Junsee
    Guest
    you haven't closed the lists properly
    you haven't put each input field into a list item properly
    you need to put common name into a seperate list

    in your css, I am not sure what you need float left, maybe you do
    to align text left, yu can use the text-align:left; css but I think fixing the list html code should fix everything

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <fieldset id="Care Guide Step 1" class="hidden" title="Care Guide Step 1">
    	<legend>Care Guide Step 1</legend>
    	<input type="radio" name="fishtype" value="cichlids"> Cichlids
    	<input type="radio" name="fishtype" value="tropical"> Tropical fish
    	<input type="radio" name="fishtype" value="marine"> Marine fish
    	<br><br>
    	<label for="fishtype">Common Name *</label>
    	<select name="speciesChoice">
    		<option value="">--choose one--</option>
    	</select>
    </fieldset>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,902
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Can the radio buttons, use select menus instead, they take up less room on the page, are easier to style, and always return a result to the server, even if it's 'none chosen'. Problem solved.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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