Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    I have a page with three drop-down lists and only the label of the first is alligned as it should be. I've used absolute positioning to set the distance from the top of the select forms and their labels but they and up at different "altitude"? There is a bug also in IE where the labels are displayed with huge letters and no : after them.

    Here is my code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Task_2</title>
    <style type="text/css">
    *
    {
        marging:0px 0px 0px 0px;
        padding:0px 0px 0px 0px;
    }
    body
    {
        background:#bac1c2;
    }
    form.task label 
    { 
        width: 200px; 
        margin-right: 0px;
    }
    form.task select 
    {
        margin-left: 0px; 
        width: 200px; 
    }
    form.task label 
    {
        left:2px;
        float:left;
        text-align:left;
        font-weight:bold;
        font-size:1em;
    }
    label.county
    {
        position:absolute;
        top:0px;
        margin:0px 0px 0px 0px;
    }
    label.area
    {
        position:absolute;
        top:7em; /*equal to top of .area*/
    }
    label.imagesel
    {
        position:absolute;
        top:14em; /*equal to top of .imagesel*/
    }
    form.task label:after 
    { 
        content: ":"; 
    }
    form.task select 
    {
        display: block;
        margin-bottom: -0.5em;
    }
    form.task select 
    {
        margin-left: 0px;
    }
    form.task br 
    { 
        clear: left;
    }
    .county
    {
        position:absolute;
        left:4.5em;
        top:0px;
    }
    .area
    {
        position:absolute;
        top:7em;
        left:4em;
    }
    .imagesel
    {
        position:absolute;
        top:14em;
        left:5em;
    }
    .holder
    {
        position:absolute;
        top:15em;
        left:20em;  
        width:640px;
        height:480px;
        border:1px solid white;
    }
    .history
    {
        position:absolute;
        top:46em;
        width:640px;
        left:20em; 
    }
    
    </style>
    </head>
    <body>
      <form class="task" method="post" action="">
        
        <label for="county" class="county">County</label>
        <select class="county" id="county">
            <option id="Belograd4ik" value="Belograd4ik">Belograd4ik</option>
            <option id="Nesebur" value="Nesebur">Nesebur</option>
            <option id="Plovdiv" value="Plovdiv">Plovdiv</option>
            <option id="Bansko" value="Bansko">Bansko</option>
        </select><br />
        
        <label for="area" class="area">Area</label>
        <select class="area" id="area">
        </select><br />
        
        <label for="imagesel" class="imagesel">Image</label>
        <select class="imagesel">
            <option id=""></option>
            <option id="Traditional house">Traditional house</option>
        </select><br />
      
      </form>
        <div class="holder"><img src="1.JPG" alt="" width="640" height="480"/></div>
        <div class="history"> Some description of the image</div>
    </body>
    </html>

  2.  

  3. #2
    Member
    Join Date
    Jul 2006
    Posts
    46
    Member #
    13576
    problem solved. used px insted of em for positioning.

  4. #3
    Senior Member straight_up's Avatar
    Join Date
    Dec 2003
    Location
    Pennsylvania/Arizona
    Posts
    601
    Member #
    4309
    good work
    I am Alan Hogan (@alanhogan on Twitter). I like PHP, UI/UX design, and OS X.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

align dropdownlist under label

,

align label with dropdown

,

align lable to drop down list

,

align text drop down list html

,

alignment of label for dropdown

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com