Hello,
I set height value and the background image for select and text input, but the alignment of them are different on both Firefox and IE. Please refer to the attached image.
My code is here.
Could you advice how to make them same alignment?
Thanks.
I set height value and the background image for select and text input, but the alignment of them are different on both Firefox and IE. Please refer to the attached image.
My code is here.
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>Test</title>
<style>
#myprofile_country {
float:left;
position:relative;
width:132px;
}
#myprofile_postal {
float:left;
position:relative;
width:114px;
}
.myprofile_select {
border:1px solid #CCCCCC;
height:24px;
width:125px;
}
.myprofile_input {
border:1px solid #CCCCCC;
height:20px;
width:110px;
}
</style>
</head>
<body>
<div id="myprofile_country">
<select class="myprofile_select">
<option value="UA">Ukraine</option>
<option value="AE">United Arab Emirates</option>
<option value="GB">United Kingdom</option>
<option selected="true" value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option>
</select>
</div>
<div id="myprofile_postal">
<input type="text" class="myprofile_input">
</div>
</body>
</html>
Could you advice how to make them same alignment?
Thanks.
Attachments
Last edited: