Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Getting Text, Input Box, and Button lined up

    I can't for the life of me get these elements to line-up right. They should all essentially be centered vertically to one another. If you check it out in Google Chrome and Opera, it's perfect. Every other browser, things are either higher or lower. Any ideas here?


    The top right side Log-In box:
    http://andrewmccarrick.com/kam/

    Relevant CSS and HTML:

    Code:
    #headerRight{
    width: 470px;
    height: 240px;
    float: right;
    }
    #loginBox{
    border: 2px;
    border-top: 0px;
    border-right: 0px;
    border-color: #336683;
    border-style: solid;
    border-collapse: collapse;
    border-bottom-left-radius: 15px;
    height: 30px;
    width: 460px;
    background-color: #336683;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    float: right;
    z-index: 2;
    font-size: 12px;
    }
    #loginBoxFixed{
    position: fixed;
    top: 0px;
    z-index: 2;
    text-align: center;
    -webkit-align-content: center;
    -moz-align-content: center;
    -ms-align-content: center;
    align-content: center;
    }
    #loginBoxFields{
    line-height: 35px;
    }
    .loginEntryBox{
    width: 85px;
    height: 12px;
    }
    #submit{
    font-size: 10px;
    height: 20px;
    position: relative;
    bottom: 2px;
    }
    Code:
    <div id="headerRight">
    <div id="loginBoxFixed">
    <div id="loginBox">
    <div id="loginBoxFields">
    <label for="username">Username: </label><input class="loginEntryBox" id="username" name="username" type="text" />
    <label for="password">Password: </label><input class="loginEntryBox" id="password" name="password" type="password" />
    <input id="submit" name="submit" type="button" value="Log-In" />
    Forgot Password?
    </div>
    </div>
    </div>
    </div>
    Last edited by HDRebel88; 07-05-2013 at 12:49 AM.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    Try setting the vertical-align property for the relevant elements?

    HTH
    Dan
    Last edited by whizard; 07-05-2013 at 12:50 AM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • Users who have thanked whizard for this post:

    HDRebel88 (07-05-2013)

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by whizard View Post
    Try setting the vertical-align property for the relevant elements?

    HTH
    Dan
    Perfect thanks.


  •  

    Posting Permissions

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