Question

**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 this 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;
}

Answer 1

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.