Welcome to WebmasterWorld Guest from 18.104.22.168
Forum Moderators: not2easy
<div id="searchdiv"><img id="glass" src="images/nv-search.gif" width="24" height="23" /><form><input type="text" size="40" /> <input type="image" src="images/search-button.gif" /></form>
The tallest image (the search button) is 30px tall, which is exactly how tall I need the background-image to be. I've styled the div thus:
In FF, the background-image is somehow vertically-aligned to the center, and is only about half as tall as it should be. In IE6 and IE7, the background renders fine except that it is still missing about 2px at the top. I've been messing around with this for onger than I should have in the last couple of days, and haven't really been able to figure out what the deal is, so I figure I'm messing something up here that my meager experience with CSS has yet to teach me.
2. The extra space you're seeing is probably caused by line-height. Try tweaking that value (maybe try line-height: 100%;)
3. Make sure you're using a valid DOCTYPE so you're not in Quirks mode (beat you to it cmarshall). :)
[edited by: Fotiman at 9:33 pm (utc) on Jan. 16, 2007]