CODEWITHSUNDEEP
css
methuselah
methuselah

Reputation: 13216

CSS searchbox not rendering as expected

Any idea why my search box comes out all buggy looking like this:

enter image description here

Instead of like this:

enter image description here

Here is my HTML code:

    <form class="searchform">
        <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
        <input class="searchbutton" type="button" value="Go" />
    </form>

CSS

    #header {
    background-color: #F1F1F1;
    height: 50px;
    border-bottom:1px solid #E1E1E1;
    margin: 0px auto;
}

#header_content {
    width: 980px;
    margin: 0px auto;
    padding-top: 8px;
}

#header_logo {
    padding-right: 20px;
    float:left;
}

.searchform {
    display: inline-block;
    zoom: 1; /* ie7 hack for display:inline-block */
    *display: inline;
    border: solid 1px #d2d2d2;
    padding: 3px 5px;   
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
    box-shadow: 0 1px 0px rgba(0,0,0,.1);
    background: #f1f1f1;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
    background: -moz-linear-gradient(top,  #fff,  #ededed);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform, .searchfield {
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
    color: #fff;
    border: solid 1px #494949;
    font-size: 11px;
    height: 27px;
    width: 27px;
    text-shadow: 0 1px 1px rgba(0,0,0,.6);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    background: #5f5f5f;
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
    background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}

Full demo at: http://jsfiddle.net/FBVL2/

Upvotes: 0

Views: 107

Answers (4)

Federico Bucchi
Federico Bucchi

Reputation: 54

The problem is just this:

.searchform, .searchfield
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

Just remove .searchform

.searchfield {
    background: #fff;
    padding: 6px 6px 6px 8px;
    width: 202px;
    border: solid 1px #bcbbbb;
    outline: none;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

For me with this changes is working well.

Upvotes: 1

Logan Murphy
Logan Murphy

Reputation: 6230

.searchform is not wide enough.

.searchform {
    width: 250px;
}

http://jsfiddle.net/FBVL2/3/

Reason has something to do with CSS box model.

Upvotes: 4

AmazingDreams
AmazingDreams

Reputation: 3204

The search form input takes up the whole box, this came out what I'd call perfect.

.searchform input {
    font: normal 12px/100% Arial, Helvetica, sans-serif;
    width: 75%;
}

Upvotes: 1

Brigand
Brigand

Reputation: 86270

You're setting the container to be the same size as the search field. This means there's no space for anything else. You need to have a the input be box padding + input margin + button margin + button width.

Set the #searchform to 250px wide, and the input to 200px wide.

demo

Upvotes: 1

Related Questions