how to stop things growing in html?

**I have a search bar and a search button but when i hover over them they grow...? What do i include in my html/css to stop th开发者_如何学Pythonis from happening? Thanks in advance

HTML:

<form class="search2" method="get" action="default.html" />
<input class="search2" type="text" name="serach_bar" size="31" maxlength="255" value="" style="left: 396px; top: 159px; width: 246px;" />
<input class="search1" type="submit" name="submition" value="Search" style=" padding-bottom:20px; left: 646px; top: 159px; height: 21px" />
<input class="search2" type="hidden" name="sitesearch" value="_.html" />

CSS:

.search1
{
position: absolute;
font-family:"Arial Unicode MS";
background-color:#CCCCCC
}

.search2
{
position: absolute;
border-style:none;
font-family:"Arial Unicode MS";
color:black;
background-color:#CCCCCC;
}


input:hover{
    background-color:white;
    border-style:solid;
    border-color:white;
}

Your border style is causing the problem. To avoid that you can use outline instead of border.

Looks like your mouse over (Hover) is changing the elements border style to "Solid", which is most likely causing the form to shift a few pixels around. Remove it from the Hover css and see if it works any better.