Question

I have two input elements inside a div (a textbox and an image), intended to look like a search bar with a magnifying glass submit icon inside the border of the box. When I comment out the image input, the textbox sits perfectly inside the div. When I uncomment the image input, the textbox shifts down by a few pixels. What is it about adding the image element that causes the textbox to shift around?

HTML:

<div id="top_search_box">
    <input type="text" name="keywords" id="keywords" value="Search this site" size="15" maxlength="80"/>
    <input type="image" id="search_button" src="images/layout/search_icon.png" alt="Submit"
                       name="submit" value="Submit"/>
</div>

CSS:

#top_search_box {
  border: 1px solid #dedede;
  height: 25px;
  margin: 4px 0;
  padding: 4px 0;
}

#top_search_box #search_button {
  height: 24px;
  width: 33px;
}

#top_search_box #keywords {
  width: 190px;
  height: 24px;
  border: 0;
  padding: 0;
}

Answer 1

This is how I’d do it.

HTML

<input type="submit" value="Submit" />

CSS

#top_search_box input[type=submit]{
  background: url(images/layout/search_icon.png) no-repeat;
  height: 24px;
  width: 33px;
  padding: 0;
  margin: 0;
  text-indent: -9999em;
}

For IE you might want to set the value of the Submit button to “”

I’m assuming you don’t want the value of the input overlaying the image. If you do, simply remove the text-indent.