HTML select and input text alignment

ttvu

New Member
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.

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

  • input_select.png
    input_select.png
    2.4 KB · Views: 19
Last edited:

tinimic

New Member
You might try something like this:

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_select {
	width:125px;
	font-size:0.8em;
}
.myprofile_input {
	border:1px solid #CCCCCC;
	font-size:0.8em;
	width:110px;
}
-->
</style>
</head>
<body>
<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>
<input type="text" class="myprofile_input">
</body>
</html>
 
Top