SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with a text input being pushed down

    I have a ul I'm using as header links, and inside one is a text input. For some reason this input is being pushed down. Here is the affected area. I've also attached an image of the issue. Putting a negative margin on the top seemed to fix the issue in IE, but no other browser.

    HTML Code:
    <ul id="links_ul">
        <li>
            <a id="LinkButton1" href="#">HOME</a>
        </li>
        <li>
            <a id="LinkButton2" href="#">BROWSE</a>
        </li>
        <li>
            <a id="LinkButton4" href="#">LOGIN</a>
        </li>
        <li>
            <a id="LinkButton5" href="#">JOIN</a>
        </li>
        <li>
            <input name="search_textbox" type="text" id="search_textbox" />
        </li>
    </ul>
    HTML Code:
    #links_ul
    {
        height:37px;
        padding:0px;
        margin:0px;
        line-height:37px;
        list-style:none;
        background:#000000 url(http://urlremoved.com/uploads/layout_images/header_bg.png) no-repeat;
    }
    #links_ul li
    {
        padding:0px;
        float:left;
        margin:4px 0px 4px 4px;
        list-style:none;
    }
    
    #links_ul li a
    {
        color:#FFFFFF;
        text-align:center;
        text-decoration:none;
        display:block;
        height:29px;
        line-height:29px;
        font-weight:bold;
        width:104px;
        background:#000000 url(http://urlremoved.com/uploads/layout_images/button.png) no-repeat;
    }
    
    #links_ul li input
    {
        height:22px;
        margin:0px;
        padding:0px;
    }
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It's pushed down because of the line-height you set ion the ul. Remove the line-height and set a margin on the input.

    e.g.
    Code:
    #links_ul {
        height:37px;
        padding:0px;
        margin:0px;
        /*line-height:37px;*/
        list-style:none;
        background:#000000 url(http://urlremoved.com/uploads/layout_images/header_bg.png) no-repeat;
    }
    #links_ul li input {
        height:22px;
        margin:1px 0 0;
       padding:0px;
        vertical-align:middle
    }
    Note that IE and Firefox are always about 1px out with their alignment on inputs so you will need to hack IE if you want it pixel perfect.

  3. #3
    SitePoint Evangelist Jhorra's Avatar
    Join Date
    Sep 2004
    Location
    Phoenix, Az
    Posts
    551
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Doh! I thought I had removed that. Thanks.


Bookmarks

Posting Permissions

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