Here is a Fiddle example you can check out, along with the corresponding code :
<div class="menu-alto">
<ul>
<li>
<a title="Link" href="#">Link</a>
</li>
<li class="newsletter">
<a title="Newsletter" href="#">Newsletter</a>
</li>
<li class="last">
<label style="color:#99cc00">search </label>
<input type="text" style="width:116px;" />
<input type="submit" style="width:40px;" class="button" value="GO" />
</li>
</ul>
</div>
.menu-alto ul
{
list-style:none;
padding:0;
margin:0;
border:0;
}
.menu-alto li
{
display:block;
float:left;
font-family:Arial;
text-transform:uppercase;
color:#7c7c7c;
font-size:10px;
padding-right:16px;
}
.menu-alto li a:link,
.menu-alto li a:visited
{
color:#7c7c7c;
text-decoration:none;
letter-spacing:1px;
}
.menu-alto li a:hover
{
text-decoration:underline;
}
.menu-alto .last
{
padding-left:5px;
position:relative;
top:-5px;
}
.menu-alto .button
{
position:relative;
top:2px;
height:21px;
font-size:11px;
}
On Internet Explorer 7, there seems to be an alignment issue with the label containing the text SEARCH, and on Chrome, the button appears misaligned. How should I go about fixing this?