?
Solved

Need help aligning a RadioButtonList using CSS

Posted on 2012-04-03
9
Medium Priority
?
407 Views
Last Modified: 2012-04-04
Hi - for the life of me I can seem to figure out how to horizontally align a radio button with it's Label.  Have a look at the attached screen shot.  You'll see the buttons are not inline with the text.

Here's my CSS

.questionnaireButtons
{
    margin-left: 80px;
}

.questionnaireButtons td
{
    padding: 10px;
}

.questionnaireButtons label
{
    margin-left: 25px;
    font-size: 30px; 
}

Open in new window


I've tried to add padding-top and margin top to the .questionnaireButtons label class and that has no effect.  I also tried setting the vertical alignment to middle with no success.  Can someone help please.
questionnaire-ss.png
0
Comment
Question by:cdemott33
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37803304
Show the code for the form please

Cd&
0
 
LVL 7

Expert Comment

by:Mohamed Magdy
ID: 37803318
In easy way, You can use Table with 2 TDs such like this:

<table>
<tr>
<td>RADIOBUTTON</td>
<td>TEXT</td>
</tr>
<tr>
<td>RADIOBUTTON</td>
<td>TEXT</td>
</tr>
</table>

Open in new window


If you need to adjust this using CSS then you may need to show the source code the form as COBOLdinosaur said.

Thanks,
0
 

Author Comment

by:cdemott33
ID: 37803341
page code

<div>
    <asp:RadioButtonList ID="rblQuestions" runat="server" CssClass="questionnaireButtons">
      <asp:ListItem Value="Veterinary">Veterinary</asp:ListItem>
      <asp:ListItem Value="Consumer">Consumer</asp:ListItem>
    </asp:RadioButtonList>
</div>

Open in new window


I also use the following CSS code to style my forms.  Perhaps this is what is causing the conflict

input, textarea, select {
    -webkit-appearance: none;
}
 

input, textarea, select {
	border: 1px solid #555;
	padding: 0.5em;
	font-size: 15px;
	line-height: 1.2em;
	width: 80%;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	-webkit-appearance: none;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-webkit-border-radius: 0.5em;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border: 2px solid #058cf5;
	margin: -1px;
}
textarea {
	height: 55px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.05, #fff));
}
select {
	padding: 0.5em 1em 0.5em 0.75em;
	background: #fff url("data:image/png") no-repeat right center;
	-webkit-background-size: 1600px 32px;
	font-size: 25px;
}
input[type=text] {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.12, #fff));
}
input[type=submit] {
	width: auto;
	border-radius: 2em;
	padding: 0.25em 1em;
	line-height: 1.5em;
}
input[type=checkbox],  input[type=radio] {
	display: inline-block;
	font-size: 10px;
	line-height: 1em;
	/* margin: 0 0.25em 0 0; */
	padding: 0;
	width: 2.00em;
	height: 2.00em;
	-webkit-border-radius: 0.25em;
	vertical-align: text-top;
}
input[type=radio] {
	-webkit-border-radius: 1em;
}
input[type=checkbox]:checked {
	background: url("checkbox_checked.jpg") no-repeat center center;
	-webkit-background-size: 28px 28px;
}
input[type=radio]:checked {
	background: url("radio.jpg") no-repeat center center;
	-webkit-background-size: 28px 28px;
}





.selectButton{
	background: rgb(55,103,12);
	background: -moz-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -o-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -ms-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37670c', endColorstr='#b2e97d',GradientType=0 );
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-moz-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-ms-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-o-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	border: 1px solid #37670c;
	color: #fff;
	cursor: pointer;
	/* float: left; */
	font: bold 20px Helvetica, Arial, sans-serif;
	height: 50px;
	margin: 20px 0 35px 15px;
	position: relative;
	text-shadow: 0 1px 0 rgba(31,31,31,0.5);
	width: 180px;
}

.generalbutton {
	background: rgb(254,231,154);
	background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,231,154,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37670c', endColorstr='#7ecf2f',GradientType=0 );
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	border: 1px solid #D69E31;
	color: #85592e;
	cursor: pointer;
	/* float: left; */
	font: bold 20px Helvetica, Arial, sans-serif;
	height: 50px;
	margin: 20px 0 35px 15px;
	position: relative;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	width: 180px;
}

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37803344
LOL... if they are using a table the first step will be getting rid if it and using a modern structural approach.


Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37803456
There is no question there are conflicts asp specifying a class then CSS twisting things in knots trying to apply ever property in the book.  Who knows what is being inherited. margins, padding , font-size, line-height;  the asp does not help at all.  post a link so we can see what rhe page actually looks like.


Cd&
0
 

Author Comment

by:cdemott33
ID: 37803464
Unfortunately ASP renders the Radio Button List as a Table.  I don't have any control over this.  Personally I'm using divs.  Here's the HTML rendered by the ASP:

        <div class="question">

	<span>1. What best describes you?</span>

</div><div class="answer">

	<table id="ContentPlaceHolder1_rblQuestion1" class="questionnaireButtons">

		<tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_0" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="6" /><label for="ContentPlaceHolder1_rblQuestion1_0">Veterinary</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_1" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="5" /><label for="ContentPlaceHolder1_rblQuestion1_1">Consumer</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_2" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="4" /><label for="ContentPlaceHolder1_rblQuestion1_2">Military</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_3" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="3" /><label for="ContentPlaceHolder1_rblQuestion1_3">Law Enforcement</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_4" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="2" /><label for="ContentPlaceHolder1_rblQuestion1_4">First Responder</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_5" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="1" /><label for="ContentPlaceHolder1_rblQuestion1_5">Healthcare Professional</label></td>

		</tr>

	</table>

</div>

Open in new window

0
 

Expert Comment

by:ramgunti
ID: 37805041
Dear Friend


Use Below two classed repectively for radio button use ".radio" and for lable use ".lables"

.radio{float:left; display:inline; margin:-2px 3px 0 0; *margin:-3px 4px 0 -1px; width:18px; height:18px;}

 

.labels{font:12px Arial, Helvetica, sans-serif; color:#000; margin:3px 0px 0px 0px;}
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 2000 total points
ID: 37805688
As COBOLdinosaur said, using a table is bad news. However, if the ASP is generating it and you have no other choice, try the sample code below.  It's the rendered table with some new CSS.  Also, are you using a CSS reset?  In a case like this, you really should be.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>

<style type="text/css">
input, textarea, select {
    -webkit-appearance: none;
}
 

input, textarea, select {
	border: 1px solid #555;
	padding: 0.5em;
	font-size: 15px;
	line-height: 1.2em;
	width: 80%;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	-webkit-appearance: none;
	-webkit-box-shadow: 1px 1px 1px #fff;
	-webkit-border-radius: 0.5em;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border: 2px solid #058cf5;
	margin: -1px;
}
textarea {
	height: 55px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.05, #fff));
}
select {
	padding: 0.5em 1em 0.5em 0.75em;
	background: #fff url("data:image/png") no-repeat right center;
	-webkit-background-size: 1600px 32px;
	font-size: 25px;
}
input[type=text] {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(0.12, #fff));
}
input[type=submit] {
	width: auto;
	border-radius: 2em;
	padding: 0.25em 1em;
	line-height: 1.5em;
}
input[type=checkbox],  input[type=radio] {
	display: inline-block;
	font-size: 10px;
	line-height: 1em;
	/* margin: 0 0.25em 0 0; */
	padding: 0;
	width: 2.00em;
	-webkit-border-radius: 0.25em;
	vertical-align: text-top;
}
input[type=radio] {
	-webkit-border-radius: 1em;
}
input[type=checkbox]:checked {
	background: url("checkbox_checked.jpg") no-repeat center center;
	-webkit-background-size: 28px 28px;
}
input[type=radio]:checked {
	background: url("radio.jpg") no-repeat center center;
	-webkit-background-size: 28px 28px;
}





.selectButton{
	background: rgb(55,103,12);
	background: -moz-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -o-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: -ms-linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	background: linear-gradient(top,  rgba(178,233,125,1) 0%, rgba(126,207,47,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37670c', endColorstr='#b2e97d',GradientType=0 );
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-moz-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-ms-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	-o-box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	box-shadow: 0 1px 0 rgba(31,31,31,0.5) inset;
	border: 1px solid #37670c;
	color: #fff;
	cursor: pointer;
	/* float: left; */
	font: bold 20px Helvetica, Arial, sans-serif;
	height: 50px;
	margin: 20px 0 35px 15px;
	position: relative;
	text-shadow: 0 1px 0 rgba(31,31,31,0.5);
	width: 180px;
}

.generalbutton {
	background: rgb(254,231,154);
	background: -moz-linear-gradient(top,  rgba(254,231,154,1) 0%, rgba(254,231,154,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: -o-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: -ms-linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	background: linear-gradient(top,  rgba(254,231,154,1) 0%,rgba(254,193,81,1) 100%);
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fee79a', endColorstr='#fec151',GradientType=0 );*/
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37670c', endColorstr='#7ecf2f',GradientType=0 );
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-ms-border-radius: 30px;
	-o-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-ms-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	-o-box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset;
	border: 1px solid #D69E31;
	color: #85592e;
	cursor: pointer;
	/* float: left; */
	font: bold 20px Helvetica, Arial, sans-serif;
	height: 50px;
	margin: 20px 0 35px 15px;
	position: relative;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	width: 180px;
}
table tr td{vertical-align:middle;}
label{font-size: 15px;line-height: 15px; vertical-align:middle;height:15px;}
                                            
</style>

</head>
<body>
        <div class="question">

	<span>1. What best describes you?</span>

</div><div class="answer">

	<table id="ContentPlaceHolder1_rblQuestion1" class="questionnaireButtons">

		<tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_0" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="6" /><label for="ContentPlaceHolder1_rblQuestion1_0">Veterinary</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_1" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="5" /><label for="ContentPlaceHolder1_rblQuestion1_1">Consumer</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_2" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="4" /><label for="ContentPlaceHolder1_rblQuestion1_2">Military</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_3" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="3" /><label for="ContentPlaceHolder1_rblQuestion1_3">Law Enforcement</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_4" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="2" /><label for="ContentPlaceHolder1_rblQuestion1_4">First Responder</label></td>

		</tr><tr>

			<td><input id="ContentPlaceHolder1_rblQuestion1_5" type="radio" name="ctl00$ContentPlaceHolder1$rblQuestion1" value="1" /><label for="ContentPlaceHolder1_rblQuestion1_5">Healthcare Professional</label></td>

		</tr>

	</table>

</div>
                                            
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:cdemott33
ID: 37808352
This seamed to work best.  thank you.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question