By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,836 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

vertically aligning radio buttons with a header

P: n/a
I'm having difficulty getting the radio buttons to align vertically
with one another and the header (1 2 3 4 5) at the top. Ideally each
radio button will be directly below the one above it and the number 1
will be atop the first radio button starting at the left. Any
thoughts on how to achieve this?

<html>
<head>
<title></title>
<style type="text/css">
label {display:block; float:left; width: 130px; padding: 0;
margin: 5px 0 0; text-align: right;}
#categories {border:1px solid #000; text-align:center; font-
weight:bold;
letter-spacing:0.55em; }
#rank-input {text-align:center; border:1px solid #000; padding-left:
1em;
width:100%; height:3.0em; vertical-align:middle;}
</style>
</head>
<body>
<div id="categories">1 2 3 4 5</div>
<label for="test">Test1:</label>
<div id="rank-input">Bad&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="1" />
<input type="radio" value="2" name="1" />
<input type="radio" value="3" name="1" />
<input type="radio" value="4" name="1" />
<input type="radio" value="5" name="1" />
<img src="images/smile.gif" title="good" />&nbsp;Good
</div>
<label for="test">Test2:</label>
<div id="rank-input">Worse&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="2" />
<input type="radio" value="2" name="2" />
<input type="radio" value="3" name="2" />
<input type="radio" value="4" name="2" />
<input type="radio" value="5" name="2" />
<img src="images/smile.gif" title="good" />&nbsp;Better
</div>
<label for="test">Test3:</label>
<div id="rank-input">Terrible&nbsp;
<img src="images/frown.gif" title="bad" />
<input type="radio" value="1" name="3" />
<input type="radio" value="2" name="3" />
<input type="radio" value="3" name="3" />
<input type="radio" value="4" name="3" />
<input type="radio" value="5" name="3" />
<img src="images/smile.gif" title="good" />&nbsp;Great
</div>
</body>
</html>

Feb 17 '07 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Greg Scharlemann wrote:
I'm having difficulty getting the radio buttons to align vertically
with one another and the header (1 2 3 4 5) at the top.
Use a table

--
Berg
Feb 18 '07 #2

P: n/a
>
Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up. There has
got to be a way...

Feb 18 '07 #3

P: n/a
Scripsit Greg Scharlemann:
>Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up. There has
got to be a way...
What makes you think there has got to be a way? There are myriads of things
that just cannot be done in CSS.

Radio buttons have idiosyncratic renderings. You can apply vertical-align to
them, but you cannot expect consistent results, since you cannot know what
is the widget that you are centering - is it the circle, or a hypothetical
box containing the circle, or something quite different. (There is no
specification of what a radio button _should_ or _shall_ look like.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 18 '07 #4

P: n/a
Greg Scharlemann wrote:
>>
Use a table
I am trying to do it using CSS and without having to individually pad
each row on the left side to get the columns to line up.
Rows and columns... sounds like tabular data to me. Use a table.

If you insist on using CSS, then consider what the content will look
like when stylesheets aren't applied. Will it still make sense?

--
Berg
Feb 18 '07 #5

This discussion thread is closed

Replies have been disabled for this discussion.