SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trouble styling forms (radio btns)

    Face to Face Tutoring

    It doesn't look right in Chrome and Safari.

    in FF and O, the buttons are to the right of the labels like they should be.

    Any ideas?

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Just make the text a "label" and display inline-block both of them. That's how I just did it (with Paul's advise) and it worked perfect.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Just make the text a "label" and display inline-block both of them. That's how I just did it (with Paul's advise) and it worked perfect.
    the texts were already labels.

    I tried:

    #years ul li label{display: inline-block;
    }

    #years ul li input{display: inline-block;
    }

    didnt work

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I can't see your code at the moment. But assuming they're in the ul/li then you need to prob make the li display inline then.

  5. #5
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    assuming they're in the ul/li then you need to prob make the li display inline then.
    I tried that too to no avail, I'm sure I have something else in my CSS that is inhibiting this from displaying right.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <label class="fixed" for="p_name">
    First &amp; Last Name (Parent):
    <span class="red">*</span>
    </label>
    <input id="p_fname" class="n_text" type="text" name="p_name">
    <input id="p_lname" class="n_text" type="text" name="p_name">

  7. #7
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Code:
    <label class="fixed" for="p_name">
    First &amp; Last Name (Parent):
    <span class="red">*</span>
    </label>
    <input id="p_fname" class="n_text" type="text" name="p_name">
    <input id="p_lname" class="n_text" type="text" name="p_name">
    Hmm that passed validation too...fixed now.

    Anyway I'm having trouble with my radio buttons:
    Code:
    		<div id="years">
    			<p class="year">Year of Student:<span class="red">*</span></p>
    			
    			<ul>
    			
    			<li>
    			<input type="radio" name="event" id="Freshmen"  value="Freshmen"/>
    			<label for="Freshmen" class="btnRadio">Freshmen</label>
    			</li>
    			
    			<li>
    			<input type="radio" name="event" id="Sophomore" value="Sophomore"/>
    			<label for="Sophomore" class="btnRadio" >Sophomore</label>
    			</li>
    			
    			<li>
    			<input type="radio" name="event" id="Junior" value="Junior"/>
    			<label for="Junior" class="btnRadio">Junior</label>
    			</li>
    			
    			<li>
    			<input type="radio" name="event" id="Senior" value="Senior"/>
    			<label for="Senior" class="btnRadio">Senior  </label>
    			</li>
    			
    			</ul>
    			
    		</div><!-- End events -->

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Well I would just take them out of the ul/li. Its not a list. But the next thing I would try is floating the li's left or inline-block.

  9. #9
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Took them out of the list:

    Code:
    		<div id="years">
    			<p class="year">Year of Student:<span class="red">*</span></p>
    			
    			<label for="Freshmen" class="btnRadio">Freshmen</label>
    			<input type="radio" name="event" id="Freshmen"  value="Freshmen"/>
    
    			<label for="Sophomore" class="btnRadio" >Sophomore</label>
    			<input type="radio" name="event" id="Sophomore" value="Sophomore"/>
    
    			<label for="Junior" class="btnRadio">Junior</label>			
    			<input type="radio" name="event" id="Junior" value="Junior"/>
    
    			<label for="Senior" class="btnRadio">Senior  </label>	
    			<input type="radio" name="event" id="Senior" value="Senior"/>
    	
    		</div><!-- End years -->
    Changed CSS to:

    Code:
    #years label{
    float: left;
    display: inline-block;
    
    }
    
    #years input{
    float: left;
    display: inline-block;
    }
    As of now the radio buttons are inline with their respective labels, however, all of them are not being displayed in one big line, rather they are on top of each other.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Don't know how float and display inline block behaves together. I would guess float would take presidence. Never used them together and I can't think of a reason ever to use them together. So take away the float and just use the inline block. Space them out with padding or marging.

    Edit: and use vertical-align middle to line them up nice.

  11. #11
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #years label{
    
    display: inline-block;
    }
    
    #years input{
    
    display: inline-block;
    }
    This set the radio buttons inline but the labels stayed as is.

    I'll try out a few more things.

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I just did this exact setup the other day so I know that works fine. Maybe post all your code. Not css and HTML separate though. Who started that??? Just a strait copy of what you have now.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    ok i just looked. You still have float on some of them and you have clear left on the label. Remove all that and everything should work fine.

  14. #14
    SitePoint Addict
    Join Date
    Aug 2010
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric, yep, used firebug to find what else was effecting it.


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
  •