Question

Hey guys I gotta problem with positioning my button. It appears all browsers do it properly, I just have a problem with chrome.

Here are image examples:

Look at the picture of Chrome, its not properly aligned with the box on the left. (look at the top of the box, its above the box on the left by 1-2px)

This is the code I’ve used for the box on the left and the input button:

#main_pres_search input[type=text] {
    width: 660px;
    float: left;
    border: 0;
    background-color: #F8F8F8;
    padding: 10px;
    border: 1px solid #C0C0C0;
    border: 1px solid #C0C0C0;
    margin-right: 10px;
    outline: 0;
    line-height: 1;
}
#main_pres_search input[type=button] {
    border: 0;
    background-color: #2a94d8;
    color: #fff;
    font-size: 16px;
    height: 37px;
    width: 48px;
    float: left;
    line-height: 1;
}

And this is HTMl code I’ve used – nothing special. =)

<input type="text" name="query">
<input type="button" name="do_search" value="Go!">

Any ideas?

Answer 1

try to set margin-top (and the other margin values)for the button (and probably its parents) to 0.

Each browser has its own user agent style sheet.
This results in slight format differences.

You also might want to check out Yahoo’s Reset CSS. It resets several css rules to very basic values. This gives you full control over the website style.