Question

I am coding a search box that expands on focus and contracts again when you click elsewhere on the page.

The problem is that I have a submit icon to the right of the input box and as the input box is expanding (using jQuery ‘animate’) it shifts the submit icon down.

You can see what I’ve done here:

http://dl.dropbox.com/u/7966602/ID/WebContent/index.html?x=11&y=7#

Please keep in mind that the page is obviously still not done.

You should be able to view source to see the HTML and jQuery. The CSS is;

box-shadow: 0px 0px 5px #000;
height:20px;
float:right;
margin-top:24px;
margin-right:26px;
padding-top:3px;
padding-bottom:2px;
border-width: 2px;
border-style: solid;
border-color: #e5e5e5;
-moz-border-radius: 3px;
border-radius: 3px;
background: #333333;
background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff));

}

searchBoxHover #search {

font: bold 14px Arial, Helvetica;
color: #808080;
width:100px;
position:relative;
left:3px;
top:-5px;
background: #333333;
background-image: -moz-linear-gradient(#ffffff, #e5e5e5);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #ffffff));
border:0px;

}

searchBoxHover #submit {

margin:0px;
padding:0px;
border:0px;
width:21px;
height:20px;
margin-right:3px;

}

searchBox {

box-shadow: 0px 0px 5px #000;
height:20px;
float:right;
margin-top:24px;
margin-right:26px;
padding-top:3px;
padding-bottom:2px;
border-width: 2px;
border-style: solid;
border-color: #333333;
-moz-border-radius: 3px;
border-radius: 3px;
background: #333333;
background-image: -moz-linear-gradient(#333333, #1e1e1e);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #1e1e1e),color-stop(1, #333333));

}

searchBox #search {

font: bold 14px Arial, Helvetica;
color: #808080;
width:100px;
position:relative;
left:3px;
top:-5px;
background: #333333;
background-image: -moz-linear-gradient(#313131, #202020);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #202020),color-stop(1, #313131));
border:0px;

}

searchBox #submit {

margin:0px;
padding:0px;
border:0px;
width:21px;
height:20px;
margin-right:3px;

}

Answer 1

The problem is that the input is getting a display:block style while the animation is going on, then returning to display:inline.

I can’t test a solution but I would first try to float the textbox. Just float:left the textbox (you may need to relative position the form element.. not sure).