CODEWITHSUNDEEP
htmlcss
PROFESSOR
PROFESSOR

Reputation: 914

radio button align style properties

i m working with a form and putted some radio buttons followed by some textareas in a table.... the problem is the radio button is appearing towards the botttom of textarea.... and i want to position them towards the top of textarea

<table align='center' valign='top' border='1'><tr><th align='center' >  qno)1</th></tr><tr><td><textarea rows='5' cols='50' readonly>question</textarea></td></tr>
    <tr valign='top'><td><input type='radio' name='opt' value='A' checked='checked' /><textarea rows='1' cols='70' wrap='off' readonly>option d</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='B' /><textarea rows='1' cols='70' wrap='off' readonly>option a</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='C' /><textarea rows='1' cols='70' wrap='off' readonly>option b</textarea></td></tr>
    <tr><td><input type='radio' name='opt' value='D' /><textarea rows='1' cols='70' wrap='off' readonly>option c</textarea></td></tr></table>

............please help

Upvotes: 1

Views: 8586

Answers (2)

Tim B&#252;the
Tim B&#252;the

Reputation: 63734

Vertical alignment in HTML and CSS is totally screwed up. Some of the problems described here: Understanding vertical-align.

The only solution I have in mind is this: put the radio button and the textarea in a table like this:

<table align='center' valign='top' border='1'>
    <tr>
        ...
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <td style="vertical-align: top;">
                        <input type='radio' name='opt' value='B' /></td>
                    <td>
                        <textarea rows='1' cols='70'>option a</textarea></td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        ...
    </tr>
</table>

Upvotes: 0

David Christiansen
David Christiansen

Reputation: 5899

Use CSS float:left on the radio button:

style="float:left;"

as in

<style>
    input [type="radio"],.NiceRadio {float:left;}
</style>
<table align='center' valign='top' border='1'>
    <tr>
        <th align='center' >  qno)1</th>
    </tr>
    <tr>
        <td><textarea rows='5' cols='50' readonly>question</textarea></td>
    </tr>
    <tr valign='top'>
        <td><input type='radio' class="niceRadio" name='opt' value='A' checked='checked' /><textarea rows='1' cols='70' wrap='off' readonly>option d</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='B' /><textarea rows='1' cols='70' wrap='off' readonly>option a</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='C' /><textarea rows='1' cols='70' wrap='off' readonly>option b</textarea></td>
    </tr>
    <tr>
        <td><input type='radio' class="niceRadio" name='opt' value='D' /><textarea rows='1' cols='70' wrap='off' readonly>option c</textarea></td>
    </tr>
</table>

The CSS at the top is just for reference. It assigns the float:left to all the Radio buttons. Input [type=radio] is a CSS selector that works in Mozilla and alike.

Upvotes: 2

Related Questions