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.9 R22 is now available!


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 11036 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