CSS Help with RadioButton Control

Hello Experts,

I would like to have my RadioButton values lay side by side with each other with some spacing in between but we some reason I cannot make that happen. As of now they stack on top of each other. I'm going to attach a screen shot with my CSS code that I'm using now. The site is not live so I cannot post the site :(

 radiobutton
CSS:

#content
{
    width: 960px;
    min-height: 600px;
    height: auto;
    /*height: 550px;*/
    margin-top: 25px;
    padding-bottom: 20px;
    overflow: hidden;
    background-color: #fff;
    -moz-border-radius: 3em 3em 3em 3em;
    border-radius: 3em 3em 3em 3em;
    
    -webkit-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 3px 2px rgba(0,0,0,.2);
	box-shadow: 0 3px 2px rgba(0,0,0,.2);
}

#content #primary
{
    width: 900px;
}

#content #primary #bg-image
{
    width: 960px;
    height: 120px;
    background-color: #f7f1e1;
}

#content #primary h1
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding-left: 50px;
    padding-top: 20px;
    padding-bottom: 10px;
}

#content #primary h2
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 15px;
    font-weight: normal;
    color: #888;
    padding-left: 50px;
    padding-bottom: 20px;
}

#content #primary h3
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #53a4bb;
    padding-left: 50px;
    padding-bottom: 10px;
}

#content #primary p
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2em;
    color: #000;
    text-align: justify; 
    padding-left: 50px;
    padding-bottom: 10px;
}

#content #primary p b
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #000;
}

#content #primary .community
{
    margin-left: 100px;
    padding-bottom: 10px;
    
    display: block;
    list-style-type: disc;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2em;
    color: #000;
}

#content #primary .sis
{
    margin-left: 100px;
    padding-bottom: 10px;
    
    display: block;
    list-style-type: disc;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 1.2em;
    color: #000;
}

#content #primary .label
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: bold;
    color: #000;
    width: 900px;
    padding-left: 50px;
    vertical-align: middle;
    float: left;
}

#content #primary .textbox
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    border: 2px solid #d6d6d6;
    height: 30px;
    width: 300px;
    margin-left: 50px;
    float: right;
    margin-right: 300px;
    margin-top: -20px;
}

#content #primary .textboxdesc
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    border: 2px solid #d6d6d6;
    height: 120px;
    width: 300px;
    margin-left: 50px;
    float: right;
    margin-right: 300px;
    margin-top: -20px;
}

#content #primary .radiobutton
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    height: 50px;
    width: 300px;
    margin-left: 50px;
    float: right;
    margin-right: 300px;
    margin-top: -20px;
}

#content #primary .clickbutton 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
	color: #fff;
	border: solid 1px #6a000c;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#bc2625), to(#950608));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc2625', endColorstr='#950608');
	height: 35px;
	width: 88px;
	margin-top: 20px;
	margin-right: 515px;
	float: right;
}

#content #primary .clickbutton:hover 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#950608), to(#bc2625));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#950608', endColorstr='#bc2625');
	height: 35px;
	width: 88px;
}

#content #primary .clickbutton:active 
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: bold;
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#bc2625), to(#950608));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc2625', endColorstr='#950608');
	height: 35px;
	width: 88px;
}

#content #primary p a:link
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #e72833;
    text-decoration: none;
}

#content #primary p a:hover
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #ef6b73;
    text-decoration: underline;
}

#content #primary p a:visited
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #ef6b73;
    text-decoration: none;
}

Open in new window

LVL 4
asp_net2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

haloexpertsexchangeCommented:
Can we have the html that is generated to produce that form?
Even just the html from the view source would be helpful.
SSupremeCommented:
Your width of radio button is to large "width: 300px;" you need entire page to fit all of them inline.
asp_net2Author Commented:
HTML is attached.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="Support_index" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
    <!--[if IE 6]>
        <style type="text/css" media="screen">
            @import "../css/ie6.css";
        </style>
    <![endif]-->
    <!--[if IE 7]>
        <style type="text/css" media="screen">
            @import "../css/ie7.css";
        </style>
    <![endif]-->
    <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
    <title>for Microsoft - Support</title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header">
            <div id="logo">
                <a href="../index.aspx">
                    <img src="../Images/logo.png" alt="for Microsoft" class="logo" /></a>
            </div>
            <div id="social-icons">
                <ul>
                    <li><a href="http://www.facebook.com" target="_blank">
                        <img src="../Images/fb.png" alt="Facebook" /></a></li>
                    <li><a href="http://www.youtube.com" target="_blank">
                        <img src="../Images/yt.png" alt="YouTube" /></a></li>
                </ul>
            </div>
            <div id="nav">
                <ul>
                    <li><a href="../index.aspx">HOME</a></li>
                    <li><a href="../AboutUs/index.aspx">ABOUT US</a></li>
                    <li><a href="index.aspx">SUPPORT</a></li>
                    <li><a href="../Contact/index.aspx">CONTACT</a></li>
                </ul>
            </div>
        </div>
        <div id="content">
            <div id="primary">
                <div id="bg-image">
                </div>
                <h1>SUPPORT</h1>
                <p>Fill out the form below, call our Help Desk, or chat live with a Technical Support Representative.</p>
                <br />
                <asp:Label ID="lblOrgName" runat="server" CssClass="label" Text="Organization Name"></asp:Label>
                <asp:TextBox ID="txtOrgName" CssClass="textbox" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblYourFullName" runat="server" CssClass="label" Text="Your Full Name"></asp:Label>
                <asp:TextBox ID="txtYourFullName" CssClass="textbox" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblYourEmail" runat="server" CssClass="label" Text="Your Email"></asp:Label>
                <asp:TextBox ID="txtYourEmail" CssClass="textbox" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblConfirmYourEmail" runat="server" CssClass="label" Text="Confirm Your Email"></asp:Label>
                <asp:TextBox ID="txtConfirmYourEmail" CssClass="textbox" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblPhone" runat="server" CssClass="label" Text="Telephone"></asp:Label>
                <asp:TextBox ID="txtPhone" CssClass="textbox" runat="server"></asp:TextBox>
                <br />
                <br />
                <asp:Label ID="lblContactMethod" runat="server" CssClass="label" Text="Preferred Contact Method"></asp:Label>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="radiobutton" BorderStyle="None" TextAlign="Left">
                    <asp:ListItem Selected="True" Value="Phone">
                    </asp:ListItem>
                        <asp:ListItem Value="Email"></asp:ListItem>
                        <asp:ListItem Value="No Preference"></asp:ListItem>
                </asp:RadioButtonList>
                <br />
                <asp:Label ID="lblDescription" runat="server" CssClass="label" Text="Description"></asp:Label>
                <asp:TextBox ID="txtDescription" runat="server" CssClass="textboxdesc" TextMode="MultiLine" Rows="10"></asp:TextBox>
                <br />
                <br />
                <asp:Button ID="btn_SubmitTechSupport" runat="server" CssClass="clickbutton" Text="Submit" />
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

haloexpertsexchangeCommented:
ssurpreme is right, because of this  CssClass="radiobutton"  your css that applies to the listitem and is setting things way too wide for where you are trying to fit it.

 
 try changing this to 10px or so and see if that fixes your problmem  width: 300px;
asp_net2Author Commented:
@haloexpertsexchange & @SSupreme:

That did not work. I'm attaching a new screenshot along with the CSS changing the radiobutton to width=10px.

 ee
#content #primary .radiobutton
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    height: 50px;
    width: 10px;
    margin-left: 50px;
    margin-right: 300px;
    margin-top: -20px;
    float: right;
}

Open in new window

haloexpertsexchangeCommented:
try taking the width out entirely from that class.
asp_net2Author Commented:
That did not help either :(
Jen0910Commented:
Your margins seem to be your issue. decrease the amounts, or delete them entirely. That should help. Example below. Also, you have float set to right, which is going to cause it to fly all the way to the right like in the last screenshot you attached. If that's not right, switch it to left.

#content #primary .radiobutton
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    height: 50px;
    margin-left: 10px;
    float: right;
    margin-right: 10px;
    margin-top: -20px;
}

Open in new window

asp_net2Author Commented:
@Jen0910,

I changed my CSS to the following below and that did not help either please see screenshot.


#content #primary .radiobutton
{
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #000;
    height: 50px;
}

Open in new window

ee.png
Jen0910Commented:
Try removing the "label" class from the radio list, it has some positioning and margins going on that may be interfering with your other CSS rules and see where that leads you. You are definitely having some kind of CSS conflict, basically comes down to taking away as much CSS as it takes to get the display back to normal.

Have you tried creating a custom class/ID for just the radio buttons?
asp_net2Author Commented:
>> Try removing the "label" class
Tried that just now and still no luck.

>> Have you tried creating a custom class/ID for just the radio buttons?
Yes, no luck.
Jen0910Commented:
Let's try to over ride the ASP generated ID:

#RadioButtonList1 li {
      display:inline;
      margin:0; padding:0;
      list-style-type:none;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
      font-weight: normal;
      color: #000;
      height: 50px;
}

Remove the radiobutton class from the list item as well.
asp_net2Author Commented:
Still no luck :(

Changes below as you requested.

                <asp:Label ID="lblContactMethod" runat="server" Text="Preferred Contact Method"></asp:Label>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" BorderStyle="None" TextAlign="Left">
                    <asp:ListItem Selected="True" Value="Phone">
                    </asp:ListItem>
                        <asp:ListItem Value="Email"></asp:ListItem>
                        <asp:ListItem Value="No Preference"></asp:ListItem>
                </asp:RadioButtonList>


#content #primary #RadioButtonList1 li
{
    display:inline;
      margin:0; padding:0;
      list-style-type:none;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
      font-weight: normal;
      color: #000;
      height: 50px;

}
Jen0910Commented:
#content #primary #RadioButtonList1 li.radiobutton
{
    display:inline;
      margin:0; padding:0;
      list-style-type:none;
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 13px;
      font-weight: normal;
      color: #000;
      height: 50px;
}

Open in new window


<asp:Label ID="lblContactMethod" runat="server" Text="Preferred Contact Method"></asp:Label>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="radiobutton" BorderStyle="None" TextAlign="Left">
                    <asp:ListItem Selected="True" Value="Phone">
                    </asp:ListItem>
                        <asp:ListItem Value="Email"></asp:ListItem>
                        <asp:ListItem Value="No Preference"></asp:ListItem>
                </asp:RadioButtonList>

Open in new window



Interesting! Try the above, and if that doesnt work try removing the LI fron the css rule. Since I doubt removing the "li" will  help, I also tagged this in the ASP zone, perhaps they can lend you a hand.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
asp_net2Author Commented:
Hi Jen0910,

That did not work either :( I don't understand what could be causing this :( VERY frustrating......
asp_net2Author Commented:
@Jen0910,

I found the fix to the issue I had. Please see below. I had to add RepeatDirection="Horizontal".

http://www.w3schools.com/aspnet/control_radiobuttonlist.asp
asp_net2Author Commented:
Thank you for your time. Please see my last post for the fix that I found.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.