We help IT Professionals succeed at work.

how can i line up radio buttons in IE & FF

d2fox
d2fox asked
on
I have a list of questions and radio buttons next to them for the user to rate the answer.  BUT I cannot get them to line up in both firefox and internet explorer using html.  I think I need to using stying, but I don't know how.  Can someone tell me how to space the buttons equally in all browsers.  (See attached image).

Currently, here's my code to generate:

                    pnlChoice.Controls.Add(new LiteralControl("<style>.allign{ float:right; clear:both;} </style>"));
                    pnlChoice.Controls.Add(new LiteralControl("<div class='allign'>Not at all&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Somewhat&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Extremely</div>"));
                    pnlChoice.Controls.Add(new LiteralControl("<div class='allign'> 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10</div>"));
                    foreach (var question in moreq)
                    {
                        pnlChoice.Controls.Add(new LiteralControl("<br /><br /><b>" + question.Question + "<span id=" + j + " style=' display:none'>" + question.ChildQuestion1 + "</span></b>"));
                        pnlChoice.Controls.Add(new LiteralControl("<div class='allign'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='1'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='2'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='3'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='4'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='5'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='6'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='7'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='8'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='9'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <input type='radio' name='choices" + inc + "' value='10'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" </div><br />"));
                        pnlChoice.Controls.Add(new LiteralControl(" <label style='display: none' id='perm" + inc + "'></label>"));
                        inc++;
                        j++;



what if I say something like:

                        pnlChoice.Controls.Add(new LiteralControl("<div class='allign' style='position:relative;'> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <div style='float:left; width:150px;'><input  type='radio' name='choices" + inc + "' value='1'></div> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <div style='float:left; width:150px;'><input type='radio' name='choices" + inc + "' value='2'></div> "));
                        pnlChoice.Controls.Add(new LiteralControl(" <div style='float:left; width:150px;'><input type='radio' name='choices" + inc + "' value='3'></div> "));
radiobuttons.jpg
Comment
Watch Question

Top Expert 2011
Commented:
Your screen shot didn't get attached, but I am guessing that you have several rows - each containing a label and 10 radio buttons.

HTML attached for the following presentation (this is a styling issue, not a .Net coding issue - for those, I prefer to play with the HTML to get it looking right then back-into the .Net code that generates the proper layout).

Screen shot is from FireFox 7, but I've verified it also lines up correctly in the latest Chrome and Opera, and in IE8.

screen shothorizontal-radio-button-alignmen.html

Explore More ContentExplore courses, solutions, and other research materials related to this topic.