WebsiteBaker Logo
  • *
  • Templates
  • Help
  • Add-ons
  • Download
  • Home
*
Welcome, Guest. Please login or register.

Login with username, password and session length
 

News


WebsiteBaker 2.13.6 is now available!


Will it continue with WB? It goes on! | Geht es mit WB weiter? Es geht weiter!
https://forum.websitebaker.org/index.php/topic,32340.msg226702.html#msg226702


The forum email address board@websitebaker.org is working again
https://forum.websitebaker.org/index.php/topic,32358.0.html


R.I.P Dietmar (luisehahne) and thank you for all your valuable work for WB
https://forum.websitebaker.org/index.php/topic,32355.0.html


* Support WebsiteBaker

Your donations will help to:

  • Pay for our dedicated server
  • Pay for domain registration
  • and much more!

You can donate by clicking on the button below.


  • Home
  • Help
  • Search
  • Login
  • Register

  • WebsiteBaker Community Forum »
  • General Community »
  • Off-Topic »
  • Final solution correct alignment search field and button
  • Print
Pages: [1]   Go Down

Author Topic: Final solution correct alignment search field and button  (Read 10575 times)

Offline Boudi

  • Posts: 1190
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Final solution correct alignment search field and button
« on: November 17, 2010, 09:29:08 PM »
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]
<form name="search" action="<?php echo WB_URL.&#39;/search/index.php&#39;; ?>" 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]
#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

Logged
...:: Bake the Unbakable ::...

  • Print
Pages: [1]   Go Up
  • WebsiteBaker Community Forum »
  • General Community »
  • Off-Topic »
  • Final solution correct alignment search field and button
 

  • SMF 2.0.19 | SMF © 2017, Simple Machines
  • XHTML
  • RSS
  • WAP2