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
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    Why do these form elements not line up in Firefox?

    In everything else, the text input and the button are perfectly aligned vertically. But in FF3 the button is a couple of px above the text input. Why??

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    #search{
    	background-color:#125263;
    	padding:8px 5px 15px 5px;
    }
    #search label{
    	display:block;
    	font-size:10px;
    	color:#FFFFFF;
    	padding-bottom:2px;
    }
    #txtSearch{
    	width:108px;
    	height:15px;
    	margin:0; padding:0; border:0;
    	font-size:10px;
    	color:#000000;
    }
    #btnSearch{
    	width:22px;
    	height:15px;
    	margin:0; padding:0; border:0;
    	font-size:10px;
    	color:#FFFFFF;
    	background-color:#2299bb;
    }
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="search">
    	<form id="fSearch" action="search.asp" method="post">
    		<label for="txtSearch">Search Site</label>
    		<input type="text" name="txtSearch" id="txtSearch" value="" /><input type="submit" id="btnSearch" value="GO" />
    		
    	</form>
    </div>
    
    </body>
    </html>

  • #2
    Regular Coder jamesicus's Avatar
    Join Date
    Oct 2008
    Posts
    106
    Thanks
    0
    Thanked 11 Times in 10 Posts
    Keep in mind that is very difficult to produce "pixel perfect" layouts. Reference: About.com: Web Design/HTML -- You Can't Get Every Page to Look Identical, So Stop Trying!

    Consider using proportional, rather than absolute, sizing and dimensions, (% and em rather than pixels).

    James
    Web Developer Tool Kit - for creating Standards compliant and Interoperable web pages
    W3C Markup Validation Service - validate HTML code for reliable rendering in all Browsers
    WAVE accessibility evaluation tool - check page structure, image alt text, form labels, etc.

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sometimes using the line-height: function can help and making a text link with a button-like background. Have you tried playing with that?


  •  

    Posting Permissions

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