1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Aligning input field and image button

Discussion in 'CSS' started by contbd, Nov 30, 2007.

  1. #1
    Hello
    SEMrush
    I am creating a search form Where and image button (input type=image) will stay at the right side of search input field.

    But the problem is that when I place an image beside the search box, they don't stay at the same line. I mean their middle part is not well aligned. The image stays few pixel upper than the input box level.

    How can I fix it with CSS?
     
    contbd, Nov 30, 2007 IP
    SEMrush
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #2
    How about you send a link to the form where you're having trouble? Sounds like vertical-align:middle/bottom could solve this.
     
    soulscratch, Nov 30, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Ah yes I've seen this with the search box and the little magnifying glass. For Electriduct's page (my copy, not the online one) the GO button was pushing the rest of the search box down. The only way I could get around it was giving the image a bottom margin of -7 px, which moved it down and now looks pretty lined up with the search box. Also widening the search box (taller I mean) helps make things look lined up nicely.

    Soulscratch's answer would work if the thing is sitting in a table. But if it's not, try the negative bottom margin.
     
    Stomme poes, Dec 1, 2007 IP
  4. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #4
    I'm sleepy as hell, but wouldn't a vertical negative margin not work on an inline element (-7px bottom on the <img>)
     
    soulscratch, Dec 1, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well it's not an image, but input type="image" with a transparent in the html and sliding doors in the back.
    Let's see, I have this:
    
     <form method="get" action="/swish.cgi" enctype="application/x-www-form-urlencoded" id="formSearch">
    	<fieldset>
            <legend><span></span></legend>
    	<label>Product Search: </label><input type="text" name="query" id="searchField" class="fieldSearch" />  
    	<input value="GO" type="image" name="submit" class="goSearch" id="buttonSearch" src="http://stommepoes.jobva.nl/Electriduct/transparentgobtn.gif" />
    	  <input type="hidden" name="sort" value="swishrank" />
            </fieldset>			
        </form>
    
    Code (markup):
    The classes were already there and I left it in cause I didn't know what he was doing with it scripts-wise. The id is what I used:
    
    input#buttonSearch {
      height: 23px;
      width: 4em;
      margin-bottom: -7px;/*to make the rest of the search stuff behave*/
      background: url(http://stommepoes.jobva.nl/Electriduct/gobtn.gif) 0 1px no-repeat;
    }
    input#buttonSearch:hover {
      background: url(http://stommepoes.jobva.nl/Electriduct/gobtn.gif) 0 -23px no-repeat;
    }
    
    Code (markup):
    I guess it's working for the input... maybe submit and image types are blocks? Because yeah I'm looking and I don't see anywhere where I've set it as display: block.
    I tried everything else to make that btch behave and NOTHING worked... even floating it and negative-margin-looping it around still made it too high.

    This was the first time I've gotten those little images to behave.
     
    Stomme poes, Dec 1, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #6
    Setting vertical-align:middle; on input#searchField and input#buttonSearch did it for me, but I'm not seeing the whole page of course - just this tiny section so any other styles or form controls might have some influence. And you were right about the inputs respecting vertical margins.
     
    soulscratch, Dec 1, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Eh well, I'm not too familiar with vertical-align because I'm only just now starting to really dick with tables. I didn't know that held any weight with forms too. I AM using the * to strip everything of its margins and paddings including the forms. It could be that most browsers compensate with their own padding or margins for that little image.

    Oh hey now that you've got a website, you need to have a super Web 2.0 version to upload on April Fool's. Big pink BETA stars and shiny buttons and Bloggity blog blog blogz. Maddox did that with his site once where he made it like a girlie Xanga and Mr Clean. Hilarious.
     
    Stomme poes, Dec 1, 2007 IP
  8. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Try this:

    HTML:
    
    <div id="divv">
      <form id="search">
        <input type="image" name="imgg" src="PATH_TO_UR_IMAGE" id="b" />
        <input type="text" name="q" id="q" />
      </form>
    </div>
    
    Code (markup):
    CSS:
    
    #divv{text-align:right}
    #imgg{float:right;margin:0 0 0 -3px}
    
    Code (markup):
     
    manishk, Dec 5, 2007 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    But if I understood him correctly, the image is sitting too high.Floating doesn't seem to make it line up height wise (cause I tried that once too). indenting the left side shouldn't do anything-- making the bottom negative will pull it down.

    Though I am famous for misunderstanding.
     
    Stomme poes, Dec 6, 2007 IP
  10. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Well left indenting is not required. I copied the code from the project I am working on currently. The left indentation is there to stick the image button to the input box. I am trying to give a illusion of just one box which has the button in-built.
     
    manishk, Dec 7, 2007 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yeah okay I think I see what you're talking about. But then you're not getting the other guy's problem-- your image isn't sitting too high compared to the text input.

    In this image, the top one shows the problem-- the image is higher than the text input, and sometimes then it will push the rest of the input down (and sometimes doesn't, but just sits high)

    The bottom image is with the negative bottom margin.

    I was sure he meant something like this:
     

    Attached Files:

    Stomme poes, Dec 7, 2007 IP
  12. manishk

    manishk Peon

    Messages:
    63
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #12
    The simple solution pointed out by soulscratch works nicely here. My solution in not suited for this problem.
     
    manishk, Dec 7, 2007 IP