I have a layout issue in IE8 only where a negative margin does strange things.
I have tried to use some of the fixes I have found in this forum, but to no avail. It is Friday night after all!
The page is here: http://community.thelandtrust.org.uk/wordpress/
The culprit is the search field on the right hand side, which has a negative margin to allow the button to sit over it on the same line.
It works fine in all but IE8. In IE8, with a right margin of -80px the button is over the field but there is a large space to the right. With a right margin of -40px the button is on the next line, and still with a large space to the right.
I have noticed that it seems to be the same distance from the right each time. Is it a clearing issue?
Thanks in advance for any help you can offer!
The code:
<form action="http://community.thelandtrust.org.uk/wordpress/" id="search-form" class="search-form" method="get">
<div>
<input type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." id="search-text" name="s" class="search-text">
<input type="submit" value="Go" id="search-submit" name="submit" class="search-submit button">
</div>
</form>
The CSS:
input,textarea {
background:#f7f9e0 url(images/Input_gradient.jpg) repeat-x top left;
border:none;
-moz-border-radius:20px;
border-radius:20px;
vertical-align:middle;
min-height:20px;
width:94%;
font-family:Arial, sans-serif;
font-size:1em;
padding:10px 20px;
}
input.button,input#submit {
background:#e6e99d url(images/Button_gradient.jpg) repeat-x bottom left;
height:40px;
width:auto;
min-width:40px;
font-weight:700;
开发者_运维问答cursor:pointer;
float:right;
}
input.button:hover,input#submit:hover,#primary-menu li a:hover {
background:#c7cc5c;
}
form#search-form{
overflow: hidden;
}
input.search-text {
margin-right: -80px;
width: 200px;
float:left;
font-size: 1.2em;
}
input.search-submit {
background:url(images/Button_arrow_40px.png) no-repeat 0 0 transparent!important;
width:40px;
text-indent:-1000px;
font-size: 0;
display:block;
line-height: 0;
float:right;
clear:right;
}
input.search-submit:hover {
background-position:0 -40px!important;
}
for some reason IE8 is making the button double width.
adding padding: 0;
to input.search-submit
seems to fix it
精彩评论