CSS aligniment problem

Question

I am designing home page of my domain registration website and I am stuck at one place. Please go through the website at http://a2host.in/

In Firefox and Google Chrome the Search and Go Button are in same alignment with the text and select box but in Opera and IE8, they are falling down a bit.

I have tried out all the things but I am not able to figure out the actual problem.

Answer 1

try to set border:none for your buttons

Answer 2

I see a lot of unneccesary styling. In essence, this is what you want: Basic form without floats

You can tweak the font-sizes and colors here, until you have what you want. But this is a good starting point, because it is cross browser identical.

Also, think about using the <button> element instead of the <input type="button">. It gives you more freedom in styling.

Form-controls are a pain to get them look good in all browsers, especially buttons and select-boxes.

Answer 3

Please comment out the following CSS3 properties (please see below) in the .regbutton class of your stylesheet and then try

.regbutton, .regbutton:visited {
    background: #222 url(/getImage.php?src=myUploadedImages/overlay.png) repeat-x;
    display: inline-block;
    padding: 5px 10px 6px;
    color: #fff;
    text-decoration: none;
    /*-moz-border-radius: 6px;*/ /*comment out all CSS3 properties*/
    /*-webkit-border-radius: 6px;*/
    /*-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
    /*-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);*/
    /*text-shadow: 0 -1px 1px rgba(0,0,0,0.25);*/
    /*border-bottom: 1px solid rgba(0,0,0,0.25);*/
    position: relative;
    cursor: pointer;

}