4 replies to this topic

[hm9]

I have a simple form with an input box and a drop down menu, but there is a problem with the alignment of the drop down menu. it is displayed on the left side of the form and is not positioned in the same level as the input fields


The html code is shown below:

<label for="name">name:</label>
<input type="text" name="name" value="" maxlength = "27"/><br />


<label for="enquirytype">Enquiry Type:</label>
<select name="enquirytype" id="enquirytype" >
<option value="">-- Select ---</option>
<option value="">history</option>
<option value="">geography</option>
</select>

The css ----------------------->


label{
float: left;
width: 120px;
font-weight: bold;
margin-left: 50px;
}



input{
width: 180px;
margin-bottom: 5px;

}

select{
width: 180px;
margin-bottom: 5px;

}


can anyone advise how to make the drop down menu well aligned with the rest of the input forms?


cheers

[fisicx]

Can you post the URL? It's much easier to see the problem if there's an actual page.

[hm9]

sorry. i only have it on y local machine

the input fileds are displayed ok and well aligned one unde the other but the drop down menu is displayed towards the left.

[yannis]

It is always good practice to reset all the padding and margins before you apply a style sheet. Probably the select or the other controls are inheriting properties and causing the problem.


select{
width: 180px;
margin-bottom: 5px;

}

Quickest way is to add an in-line style statement and see. For both fields do this.

<select name="enquirytype" id="enquirytype" style="margin:0;padding:0" >

If this aligns both, then add the correct amounts of margin or padding you need. After you've done you can then move the style rules into the .css file.

Better method (slightly longer at the beginning). Add the FireFox plugin FireBug and have a good look at the rendered page and examine the calculated properties. You can also see how the properties are cascading.


Yannis

[hm9]

thanks. I found the source of the problem was that my page was pointing to 2 different style sheets and and both have different properties set for the same control. i deleted the first style sheet and they are displayed as expected

thanks again