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 Walter Allen
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points

Is there another CSS parameter to adjust a nav-sprite size when you've added an icon and resized the sprite?

I am working on the Extra Credit for the Creating the Menu and Footer lesson of http://teamtreehouse.com/library/build-a-simple-php-application. I have used a photo editor (Gimp) to add resize the canvas of the nav-sprite.png to allow for an additional icon, which I have added. I used the color picker to construct the icon using the same colors as the shirt and contact icons. Then, I edited the CSS adding the last line as shown here:

.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.info a {background-position: 0px -420px;}

However, when I refresh my page, the new icon will not show up. If I adjust the CSS to read as follows:

.header .nav li.shirts a {background-position: 0px 0px;}
.header .nav li.contact a {background-position: 0px -105px;}
.header .nav li.info a {background-position: 0px -105px;}

The contact icon does appear in the position that I want the info icon to appear. Is there another parameter I need to set somewhere else in my CSS file to adjust for the enlarged nav-sprite file? Any guidance is GREATLY appreciated!

Walter Allen
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points

Just for reference, here is the CSS code that includes the nav-sprite.png as the background:

.header .nav li a {
    color: white;
    text-decoration: none;
    display: block;
    line-height: 95px;
    padding: 10px 0 0;
    margin: 0 0 0 50px;
    width: 90px;
    text-align: right;
    background: url('../img/nav-sprite.png') no-repeat 0px 105px;
    text-transform: uppercase;
    white-space: nowrap; 
}

1 Answer

Walter Allen
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points

And... I'm answering my own question after continuing to tinker. I eventually discovered that my browser had saved the nav-sprite.png in cache and wasn't loading it fresh. Once I emptied my cache, the problem was solved and the info icon appeared. Ugh. Silliness, right?