CSS vertical alignment problem with list items and textareas

Question

Hi,

I am trying to get the list item's bullets to move up. As you can see in the image below the red is where I would like everything. The bullets and the dropdowns need to move up. These fields are dynamic and come from a db. Pretty much I want it to look centered and nice and can't figure it out.

Thanks for any help, Antoni

---

![alt text][1]

The CSS I am using is:

body { background: #CCCCCC; }
li { margin: .5em 0% .5em 0; }

#Questionaire {
    background: #FFF;
    width: 650px;
    margin: 10px;
    padding: 10px;
    border: solid 2px;
}

http://i.imgur.com/PXHaT.jpg

EDIT: Added the html

<div id="Questionaire">
    <!--<input type="checkbox" id="cbxSurveyEnabled" value="On" />On-->
    <ul id="QuestionContainer">

       <li id='exists_27'><span><textarea rows='5' cols='60' id='exists_text_27'>Please rate the educational value of the reviewer</textarea></span><span><select id='exists_ddl_27'><option value='YesNo'>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5' selected>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_27'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_4'><span><textarea rows='5' cols='60' id='exists_text_4'>On a scale of 1 to 3 how helpful did you find this response?</textarea></span><span><select id='exists_ddl_4'><option value='YesNo'>YesNo</option><option value='Scale1to3' selected>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_4'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_1'><span><textarea rows='5' cols='60' id='exists_text_1'>Are you happy?</textarea></span><span><select id='exists_ddl_1'><option value='YesNo' selected>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox'>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_1'); return false;"><img src='images/remove.png' alt=x' /></a></span></li><li id='exists_32'><span><textarea rows='5' cols='60' id='exists_text_32'>Check if you are OK.</textarea></span><span><select id='exists_ddl_32'><option value='YesNo'>YesNo</option><option value='Scale1to3'>Scale1to3</option><option value='Scale1to5'>Scale1to5</option><option value='Checkbox' selected>Checkbox</option></select></span><span><a href='#' onclick="DeleteQuestion('exists_32'); return false;"><img src='images/remove.png' alt=x' /></a></span></li>

    </ul>
    <input type="button" onclick="submitData(); return false;" value="Submit" />
    <input type="button" onclick="addQuestion(); return false;" value="Add question" />
</div>

Answer 1

Hi,

what html elemets do you use?

if you use basic html tag like table and td , try this:

<table>
     <!-----loop goes here--->
    <tr>
        <td valign="top">
            <li />
        </td>
        <td valign="top">
            <textarea></textarea>
         </td>
         <td valign="top">
                    <select>
                        <option>select 1</option>
                        <option>select 2</option>
                    </select>
         </td>
    </tr>
    <!---end loop---->
</table>

if you using Div elements try this:

<!-----loop goes here--->
<div>
    <div style="float: left">
        <li />
    </div>
    <div style="float: left">
        <textarea></textarea></div>
    <div>
        <select>
            <option>select 1</option>
            <option>select 2</option>
        </select>
    </div>
</div>
<!---end loop---->

hope it help..