Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Problem With Aligning Drop Down Menu


  • Please log in to reply
4 replies to this topic

#1 hm9

hm9

    Mach 1 Member

  • Members
  • 338 posts

Posted 15 June 2008 - 05:02 PM

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

#2 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1855 posts

Posted 16 June 2008 - 03:41 AM

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

#3 hm9

hm9

    Mach 1 Member

  • Members
  • 338 posts

Posted 16 June 2008 - 06:24 AM

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.

#4 yannis

yannis

    Sonic Boom Member

  • 1000 Post Club
  • 1634 posts

Posted 16 June 2008 - 02:36 PM

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

#5 hm9

hm9

    Mach 1 Member

  • Members
  • 338 posts

Posted 19 June 2008 - 06:59 AM

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



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users