SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
-
Jul 20, 2009, 23:05 #1
- 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; }
-
Jul 21, 2009, 03:56 #2
- 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 }
-
Jul 21, 2009, 06:11 #3
- 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