homepage Welcome to WebmasterWorld Guest from 54.237.134.62
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS Sprite not working properly
LinusIT




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

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">&nbsp;</a> <a href="/dev/switch.php?company=maverick" class="mav-inactive">&nbsp;</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 &nbsp; is placed within the tag.

 

penders




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

#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 (&nbsp;).

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




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

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




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

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.

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved