Forum Moderators: not2easy
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/pixel.css" />
</head>
<body>
<input type="text" style="width:120px;" name="finduser" id="finduser" /><input type="image" src="images/go.gif" id="gobtn" />
</body>
</html>
and the css:
html, body, form, fieldset { margin: 0; padding: 0; }
input, select, textarea { font-size: 100%; }
body, select, input { font-family: Arial; font-size: 10pt; }
body { background-color:#9B9B9B; text-align: center; }
img, a { border:0px; }
#finduser {
display: inline;
margin:0 auto;
background: transparent url('../images/button.gif') repeat-x;
border: 1px solid #716C71;
height: 17px;
padding: 2px 0px 1px 2px;
vertical-align:baseline;
}
#gobtn {
display: inline;
margin: 0 auto;
padding:0;
border-top: 1px solid #716C71;
border-bottom: 1px solid #716C71;
border-right: 1px solid #716C71;
vertical-align:baseline;
}
The two elements will not sit at the bottom of the line.
Any help is greatly appreciated, thanks.
Craig
height: 15px; <----------
padding: 0px <---------- 0px 1px 2px;
< link removed - no screenshots, please. See Forum Charter [webmasterworld.com] >
The link above shows an image of what I have, both images referenced are 20px in height,
Craig
[edited by: tedster at 9:10 am (utc) on Feb. 9, 2009]
according to the CSS specification, Firefox is correctly displaying this code.
only thing I found that works for IE (6) is margin-bottom on the gobtn class, but that messes up Firefox.
Either way.. your solution lies with using "VERTICAL-ALIGN: BOTTOM"
html, body, form, fieldset { margin: 0; padding: 0; }
input, select, textarea { font-size: 100%; }
body, select, input { font-family: Arial; font-size: 10pt; }
body { background-color:#9B9B9B; text-align: center; }
a, img > finduser { border:0px; }
#finduser {
display: inline;
height: 18px;
background: url('button.gif') repeat-x;
background-position: top left;
border: 1px solid #716C71;
vertical-align:bottom;
}
#gobtn {
display: inline;
margin-bottom: 1px; <------ OPTIONAL OMIT IF NOT NEEDED
padding: 0;
border-top: 1px solid #716C71;
border-bottom: 1px solid #716C71;
border-right: 1px solid #716C71;
border-left: none;
vertical-align: bottom;
