Final solution correct alignment search field and button

[Boudi]

Hi there,

How many times did you struggle about a correct alignment of the search field and button? I guess many times.

But today I found a solution that is SO simple. No hack, just a few lines of css and 1 ID. Works 100% in every browser!

http://christophzillgens.com/en/articles/equal-height-input-and-button-elements-in-firefox-and-safari

Example for WB:

Search code (custom redone by me):

Code Select Expand

<form name="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="get" id="search">
        <input type="text" align="middle" name="string" value="typ in your keyword" onFocus="if(this.value=='typ in your keyword')this.value='';" onBlur="if(this.value=='')this.value='typ in your keyword';"><input type="submit" name="submit" value="search" />
  </form>

CSS:

Code Select Expand

#search input {vertical-align:middle; font-weight:normal; font-size: 11px; -moz-border-radius:0px; -webkit-border-radius:0px;}
#search input[type="text"] {width:150px; padding:8px 87px 8px 8px; background:#fff; border:0px solid #fff;}
#search input[type="submit"] {width:40px; margin-left:-40px; padding:8px; border:none; color:#333; background: #ccc; cursor:pointer;-moz-border-radius:0px; -webkit-border-radius:0px;}
#search input[type="submit"]::-moz-focus-inner {border:0;}
#search input[type="submit"]:focus {background:#333;}


Enjoy!

Boudi