CODEWITHSUNDEEP
htmlcsslayout
iftheshoefritz
iftheshoefritz

Reputation: 6129

HTML image input element changes vertical layout of other elements inside div

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;
}

Upvotes: 0

Views: 430

Answers (2)

daveyfaherty
daveyfaherty

Reputation: 4613

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.

Upvotes: 1

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

It's probably a margin difference between the different inputs, use a good CSS Reset.

Upvotes: 1

Related Questions