Question

EDIT: Here’s a jsfiddle demo.

EDIT 2: I think it’s being overridden by the Twitter Bootstrap stylesheet that I’m using, too. I’ll figure out what’s wrong in there. Thanks for the help, guys.

Here’s what my form looks like right now:

Ideally I’d like the search bar and submit button to be centered (equal margins to the left of the search bar and to the right of the button).

My CSS doesn’t seem to be working:

body {
    text-align:center;
    padding-top:5%;
    background:url(/img/bg.png);
    background-position:center;
    background-position:top;
    background-repeat:no-repeat;
    background-color:0b334c;
}

.searchContainer {
    width:440px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 5%;
    zoom:1;
}

.searchBox {
    border: 1px solid #000000;
    padding:10px;
    margin: 0 auto;
    height:auto;
    width:auto;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
    background-color:#6eb0d9;
    background-color:#6eb0d9;
    background-repeat:repeat-x;
    background-image:-khtml-gradient(linear, left top, left bottom, from(#9cd1e9), to(#6eb0d9));
    background-image:-moz-linear-gradient(top, #9cd1e9, #6eb0d9);
    background-image:-ms-linear-gradient(top, #9cd1e9, #6eb0d9);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #9cd1e9), color-stop(100%, #6eb0d9));
    background-image:-webkit-linear-gradient(top, #9cd1e9, #6eb0d9);
    background-image:-o-linear-gradient(top, #9cd1e9, #6eb0d9);
    background-image:linear-gradient(top, #9cd1e9, #6eb0d9);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9cd1e9', endColorstr='#6eb0d9', GradientType=0);
}

.searchBox form {
    display:inline-block;
}

.searchBox h2 {
    letter-spacing:-0.05em;
    padding-bottom:8px;
}

.searchBar {
    border: double;
    height:31px;
    width:357px;
    background-color:#fff;
    background-color:#fff;
    background-repeat:repeat-x;
    background-image:-khtml-gradient(linear, left top, left bottom, from(#eee), to(#fff));
    background-image:-moz-linear-gradient(top, #eee, #fff);
    background-image:-ms-linear-gradient(top, #eee, #fff);
    background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #fff));
    background-image:-webkit-linear-gradient(top, #eee, #fff);
    background-image:-o-linear-gradient(top, #eee, #fff);
    background-image:linear-gradient(top, #eee, #fff);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#fff', GradientType=0);
}

input.searchButton {
    position:fixed;
    height: 31px;
    width: 33px;
    cursor: pointer;
    border: none;
    background:url(../img/searchButton-Off.png) no-repeat;
} 

input.searchButton:hover { 
    position:fixed;
    height: 31px;
    width: 33px;
    cursor: pointer;
    border: none;
    background:url(../img/searchButton-On.png) no-repeat;
} 

---

  <div class="searchBox">
    <h2 style="color:#000000;">Search</h2>
    <form id="form_297586" class="appnitro"  method="get" action="results.php">
      <input id="keywords" name="keywords" class="searchBar" title="What do you like...?" type="text" maxlength="255" value=""/>
      &nbsp;<input type="submit" class="searchButton" value="" />
      <input type="hidden" name="form_id" value="297586" />
      <input type="hidden" name="src" value="n" />
      <input type="hidden" name="fancy" value="y" />
    </form>
  </div>

What am I doing wrong here?

Answer 1

The only way I could get this to work was by removing the position: fixed from the search-button, and search-bar (inputs), and then adding position: relative; top: -9px; to the .searchButton element.

Which feels dirty, to be honest; and I don’t know why that should be required.

Anyway, a JS Fiddle demo.