...

View Full Version : Why do these form elements not line up in Firefox?



Spudhead
11-04-2008, 06:38 PM
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?? :confused:



<!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>

jamesicus
11-04-2008, 07:26 PM
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! (http://webdesign.about.com/od/webdesigntutorials/a/aa061404.htm)

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

James

stanfordrep
11-04-2008, 10:10 PM
Sometimes using the line-height: function can help and making a text link with a button-like background. Have you tried playing with that?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum