homepage Welcome to WebmasterWorld Guest from 54.205.105.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background-image for div with forma and images
neo schmeichel

5+ Year Member



 
Msg#: 3221332 posted 7:39 pm on Jan 16, 2007 (gmt 0)

I'm coding a page with a search bar, behind which is a simple background image. The search form includes: 1. A small icon image (which actually isn't part of the form, but should appear to be so) 2. A text input for the search terms, and 3. An image input button to activate the search. The code looks something like this:

<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>
</div>

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:

#searchdiv{
height:30px;
width:805px;
display:inline;
background-image:url(images/greystripe.gif);
background-position:top left;
background-repeat:no-repeat;
margin-bottom:5px;
padding:0;
}

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.

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3221332 posted 9:32 pm on Jan 16, 2007 (gmt 0)

1. Width does not apply to inline elements. You'll need to make #searchdiv a block element.

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]

neo schmeichel

5+ Year Member



 
Msg#: 3221332 posted 11:17 pm on Jan 16, 2007 (gmt 0)

Fotiman:

Setting display to "block" was the magic elixir. Thanks a bunch.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved