Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts

    How do I use a buttom image with the following search form code?

    Here is the simple search form code I'm using on my blog, but I'd like to add an image as a button. I can find a suitable image and such, I just need to know how to ammend the code below to include the buttom image. I'd like it positioned on the end of the search field, with about a 2px gap between the two.

    Thanks.

    <form id="searchthis" action="/search" style="DISPLAY: inline" method="get"><input id="search-box" style="BORDER: 1px solid #ccc; FONT-FAMILY: arial; FONT-SIZE: 11px; MARGIN: 0px 0px 0px 0px; COLOR: #000; text-align: left; padding: 3px; background: #fff; font-style: italic;" value="click here to search..." name="q" autocomplete="off" onclick="this.value=&quot;&quot;;" size="25" type="text/" /></form>

  • #2
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hi,
    Write class for the button and call the image as a background
    for the class this will make image to appear on the background of
    your button

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    223
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Sorry, shankar, perhaps I should have explained that my html/css knowledge is a little lacking. I figured out how to give the buttom image a class name and position it using css, but the old-age problem of getting it to align properly in all browsers arose. I got it lined up in FF, but it's slightly out in IE - as for how it looks in the ever-growing range of other browsers I dread to think. I found a site which described displaying the search box and button as one image, so that it would be lined up in whatever browser it was viewed in, but the instructions were beyond me.

    For what it's worth, this is how it currently looks (although I'm constantly working on it so it could look like anything at any given time)

    http://2alkbox.blogspot.com/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •