Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

Sign in to follow this  
hm9

Problem With Aligning Drop Down Menu

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Sign in to follow this  

×