Trouble styling forms (radio btns)

HTML & CSS
1

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 
#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.

3

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.

4

the texts were already labels.

I tried:

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

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

didnt work

5

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.

6

I tried that too to no avail, I’m sure I have something else in my CSS that is inhibiting this from displaying right.

7 

<label class="fixed" for="[COLOR="Red"]p_name[/COLOR]">
First &amp; Last Name (Parent):
<span class="red">*</span>
</label>
<input id="p_fname" class="n_text" type="text" name="[COLOR="Red"]p_name[/COLOR]">
<input id="p_lname" class="n_text" type="text" name="[COLOR="Red"]p_name[/COLOR]">
8

Hmm that passed validation too…fixed now.

Anyway I’m having trouble with my radio buttons:

		<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 -->
9

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.

10

Took them out of the list:

		<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:

#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.

11

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.

12

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

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

Thanks Eric, yep, used firebug to find what else was effecting it.