IE7 CSS alignment issue
The following code is working perfect on firefox and IE8 . But on IE 7 the middle "search input text field" is not aligning properly with other two feilds , It is coming down bit ..
Here is the code and thanks your help
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS IE 7 I开发者_如何学JAVAssue</title>
<style type="text/css">
.search{
background:#000000;
width:700px;
border:3px solid #000;
}
.inputWrap, .buttonWrap, .selectWrap {float:right; border:0px solid #000;} input[type="text"], input[type="button"],select {height:1.5em; line-height:1.5em; font-size:100%; border-width:0; padding:0;} /* ie7- specific css */ .search .textfield {float:right; display:inline;}
</style>
</head>
<body>
<div class="search">
<form id="searchForm" action="#" method="post">
<div class="buttonWrap"><input type="button" value="Go" /></div>
<div class="inputWrap"><input type="text" value="Search .." /></div>
<div class="selectWrap">
<select>
<option value="Company">Company</option>
<option value="Profession">Profession</option>
<option value="People">People</option>
</select>
</div>
</form>
<br style="clear:both"/>
</div>
</body>
</html>
- DEMO: http://so.devilmaycode.it/ie7-css-alignment-issue
.search {
text-align: right;
background: #000000;
width: 700px;
border: 3px solid #000;
}
form {
vertical-align: middle;
padding: 5px;
margin: 0;
}
form div {
display: inline;
border: 0;
margin: 0 5px 0 0;
padding: 0;
}
input, select {
vertical-align: middle;
margin: 0;
padding: 0
}
Try setting width explicitly for all elements you want on the same level and their parent.
加载中,请稍侯......
精彩评论