CSS Sprite not working properly - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Sprite not working properly

LinusIT

6:05 pm on Sep 25, 2011 (gmt 0)

10+ Year Member

I'm hoping someone can help me with this as I'm at my wits end. It was working but it is no longer and I can't figure it out.

It is showing a small section of the image, just not all of it. At a guess I'd say it's showing 5px wide & 10/15px height.

HTML:

<body>
<div id="toppanel">
<div id="panel">
<a href="#" class="wsr-active"> </a> <a href="/dev/switch.php?company=maverick" class="mav-inactive"> </a>
<a href="/dev/change-password.php" class="settings"></a> <a href="/dev/logout.php" class="logout"></a>
</div>
</div>
</body>

CSS:

*{margin:0;padding:0;}
body{font:12px Verdana, Arial, Helvetica, sans-serif;color:#666666;overflow:auto;height:100%;max-height:100%;margin-bottom:20px;}
#toppanel{position:relative;top:5px;width:100%;/*z-index:999;margin-left:auto;margin-right:auto;*/}
#panel{width:100%;height:420px;/*overflow:hidden;position:relative;z-index:3;*//*margin-right:25px;display:none;*/}
#panel a {
background: url('../images/header-icons.jpg') /*no-repeat top left*/; }
#panel .mav-active{ background-position: 0 0; width: 66px; height: 24px; }
#panel .mav-inactive{ background-position: 0 -25px; width: 66px; height: 24px; }
#panel .wsr-active{ background-position: 0 -50px; width: 50px; height: 24px; }
#panel .wsr-inactive{ background-position: 0 -75px; width: 50px; height: 24px; }
#panel .login{ background-position: 0 -100px; width: 36px; height: 37px; }
#panel .logout{ background-position: 0 -138px; width: 36px; height: 37px; }
#panel .settings{ background-position: 0 -176px; width: 36px; height: 37px; }

The Change Password and Logout links don't show at all unless   is placed within the tag.

penders

8:11 pm on Sep 25, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

#panel .settings{ background-position: 0 -176px; width: 36px; height: 37px; }

You cannot set the width of an inline element. The anchor is an inline element. You probably need to set

display:inline-block

(or block, or float it) so you can. The 5px is probably the width of the single space ( ).

But you should always have some content in your anchors if only for accessibility. Hide it with

text-indent:-9999px

or similar. (It must also be a block-level element for text-indent to work.)

rocknbil

5:39 pm on Sep 26, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

And . . . watch out if you want to use text-align: in combination with text-indent, it will do some weird stuff. :-) Also set outline:none or you'll get the dotted line running off the page when the link is active (mouse down.)

The second thing to watch out for is "background" is generally a shorthand version for specifying all attributes (as you can see with top left no-repeat) so in a case like this I'd use background-image instead.

Not sure why you're doing all the positioning stuff on the elements themselves. Since you have no "left" or "right" set on top-panel or panel, regular floats in combination with semantic HTML for this list of links will do.

This example makes use of the shrink wrap effect of floating in that a floated parent object will contain all of it's floated children, which makes for a lot less frustration when working with floats. Strange (different, never seen it) approach, not quite sure how I'd handle a variable width and height on hover. Your job might be easier if you use ONE width and height on the li and the a, and mod the image to fit that.


<div id="toppanel"> 
 <ul> 
 <li><a href="#" class="wsr-active">WSR</a></li> 
 <li><a href="/dev/switch.php?company=maverick" class="mav-inactive">Maverick</a></li> 
 <li><a href="/dev/change-password.php" class="settings">Change Password</a></li> 
 <li><a href="/dev/logout.php" class="logout">Log Out</a></li> 
</div>

*{margin:0;padding:0;}
body{font:12px Verdana, Arial, Helvetica, sans-serif;color:#666666;overflow:auto;height:100%;max-height:100%;margin-bottom:20px;}
#toppanel{width:100%; margin:5px auto 0 auto; }
#toppanel ul{display:block;width:100%;height:420px;float:left;}
#toppanel ul li { display: block; float: left; }
#toppanel ul li a {display:block; background-image: url(../images/header-icons.jpg); background-repeat: no-repeat; text-indent:-50000px; border:none; outline:none; }
#toppanel ul li .mav-active{ background-position: 0 0; width: 66px; height: 24px; }
#toppanel ul li .mav-inactive{ background-position: 0 -25px; width: 66px; height: 24px; }
#toppanel ul li .wsr-active{ background-position: 0 -50px; width: 50px; height: 24px; }
#toppanel ul li .wsr-inactive{ background-position: 0 -75px; width: 50px; height: 24px; }
#toppanel ul li .login{ background-position: 0 -100px; width: 36px; height: 37px; }
#toppanel ul li .logout{ background-position: 0 -138px; width: 36px; height: 37px; }
#toppanel ul li .settings{ background-position: 0 -176px; width: 36px; height: 37px; }

you may not need the ul li parts on the a, but if there are other links in #toppanel, you will.

LinusIT

11:31 am on Sep 27, 2011 (gmt 0)

10+ Year Member

Thanks Rocknbill, your code has worked perfectly. I've added a few hover effects and margins to space things out as well.

Looking good, thanks everyone.