Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by William J. Terrell
William J. Terrell
17,403 Points

Using Image Sprites

I am working on a site that contains a Search bar. The Search bar is accompanied by an image of a magnifying glass, as many Search bars are.

The problem, though, is that only the lower third of this image is "clickable", and I can't figure out why.

It is apparently set up using a sprite-map; a 38px w x 69px h image containing three variants of the magnifying glass, each one 38px w x 23px h, and it just adjusts the background-position to show one or the other for a "normal" state, a "hover" state, and an "active" state.

I thought that there were some other divs that might be overlapping part of the magnifying-glass, making it un-clickable, but the div containing it has a z-index of 999, and so is either above or on level with the other divs in the area. What's more, when I select it using the Google Developer Tools, it highlights the whole area that is visible...

I've included the CSS for the button itself below:

/* CSS for .searchButton*/

#welcomeBackBar .searchButton, #sideBar .searchButton {
    background-image: url("../images/PortletImages/Icons/search-button-sprite.png");
    background-position: 0 0;
    display: inline-block;
    height: 23px;
    margin-bottom: -4px;
    margin-top: 3px;
    padding: 0;
    width: 38px;
}

    #welcomeBackBar .searchButton:hover, #sideBar .searchButton:hover {
        background-position: 0 -23px;
    }

    #welcomeBackBar .searchButton:active, #sideBar .searchButton:active {
        background-position: 0 -46px;
    }

    #resultsbox .searchButton {
    background-image: url("../images/PortletImages/Icons/search-button-sprite.png");
    background-position: 0 0;
    display: inline-block;
    height: 23px;
    margin-bottom: -4px;
    margin-top: 3px;
    padding: 0;
    width: 38px;
}

    #resultsbox .searchButton:hover {
        background-position: 0 -23px;
    }

    #resultsbox .searchButton:active {
        background-position: 0 -46px;
    }

Also, here is the HTML that appears on the page for it. Apparently, it's more of an < a > tag with the image just being used for styling. I don't know if that would have something to do with it or not...

<a onclick="return searchBox.searchClick();return searchBox.validate();" id="ctl04_lbSearch" title="Search" class="searchButton ieInlineBlock" alt="Search" href="javascript:__doPostBack('ctl04$lbSearch','')"></a>

Any suggestions or insight would be appreciated.

Thanks!

1 Answer

Pete Cass
Pete Cass
16,656 Points

Is your anchor element wrapped inside anything?

when facing problems like this I like to give everything a bright colored border with a universal selector so i can see exactly where everything is.

William J. Terrell
William J. Terrell
17,403 Points

I applied a big, bright-yellow border around it and took a screen-shot of it.

Doing that moved another div out of view (everything on this site is positioned with absolute values), but the whole button became clickable.

I would say that it might be that div that was in the way, but it has a z-index of 900, and the one with the Search controls is 999...

Here is another screen-shot with a yellow border around the div itself. (note how it pushes the line underneath it half-way out of view).

Please let me know if this helps.

Thanks!

William J. Terrell
William J. Terrell
17,403 Points

I've added another screen-shot that shows div.searchControls (yellow-green border) and div#welcomeBackBar (white dashed border).

William J. Terrell
William J. Terrell
17,403 Points

I think I may have found the culprit; the h1 element in div#masthead, indicated by the red dotted border.

The only thing, though, is that, when set all the way down to 0, it still "covers" the top half of the magnifying-glass-button. If I set it to a negative value, the whole button becomes clickable, but then the bit that contains the "Owlnet" logo (top-left) disappears.

But maybe if I just set it's height to 0......

William J. Terrell
William J. Terrell
17,403 Points

That seems to have solved it! I set div#masthead h1 to height: 0; and I can now click on the whole magnifying-glass button, and still see the Owlnet logo!

I guess the positioning of the logo is, at least in part, dependent on the positioning of that h1, which is why it disappeared when I set the h1's z-index to negative. But when I set it's height to zero, it stopped covering the magnifying-glass button, but stayed in the same place relative to the top-left corner of the screen, so my logo stayed in the same place relative to that.

Man this thing is set up weird...

Thanks Pete Cass! :)