Question

my search which is on the right side has a button named as Go, it is on right place in all modern browsers except IE8 (in IE7 and IE6 it is a nightmare but I don’t care for those browsers).
I tried a few things but the button is not coming to its place in IE8 can someone tell me why is it so
here is an image to show what I mean
http://content.screencast.com/users/cryoffalcon/folders/Jing/media/92fc0c87-44ac-4c7a-9af5-d8d5824ef85d/go%20button.png

Here is the demo page http://bloghutsbeta.blogspot.com/2012/03/testing-3.html
and if you don’t want to look for the css
here is the css:

.formbox {
background:#434445;
border-top-color:#0f0f0f;
border-top-style:solid;
border-top-width:3px;
border-left-color:#0f0f0f;
border-left-style:solid;
border-left-width:3px;
border-right-color:#797d7d;
border-right-style:solid;
border-right-width:3px;
border-bottom-color:#797d7d;
border-bottom-style:solid;
border-bottom-width:3px;
-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
color:#787D7D;
font:13px Verdana,Geneva,sans-serif;
margin: 3px 0 5px 5px;
padding:1px;
}
.formbutton {
margin:0 5px 5px 0;
color:#B6E85E;
text-shadow: 0 0 4px #7F241C, 0 0 4px #7F241C,
        0 0 4px #7F241C;
cursor:pointer;
}

Answer 1

Removing the top and bottom margins from .formbox and .formbutton, and setting them both to vertical-align: top; largely sorted the problem in IE8. If you need that vertical space around them, you could move use padding on the parent form (and make it display: block;).

(Using conditional classes makes it a lot easier to target IE-specific fixes like these)