Problem with css sprite button

**gemzilla** · 08-30-2013, 09:20 AM

I am making a CSS sprite button that instead of going to another page it shows more (like a read more/read less button). It is not working quite properly as when you hover over it the background image of the button does not change. Also in trying to fix this for some reason the footer style has gone funny. I have not touched the CSS for the footer so I do not know why it has stopped working. Below is the CSS and link to the page, the PHP is in another comment.

Link: http://kent-telephones.ismywebsite.co.uk/exchange.php (I am working with the Sign Up button)

CSS

Code:

/* CSS Document */

body {
	margin-top:0;
	font-family:Arial, Helvetica, sans-serif;
}

p {
	text-align:justify;
}

h1 {
	text-align:center;
}

a {
	color:#00C;
	text-decoration:none;
}

a:hover {
	color:#900;
}

.centre {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

img a {
	border:none;
}

.left {
	float:left;
	margin:5px;
}

.right {
	float:right;
	margin:5px;
}

.textright {
	text-align:right;
}

.smallprint {
	font-size:10px;
	font-style:italic;
}

#banner {
	width:1000px;
	height:500px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../Images/graphic.jpg)
}

#logo{
	width:700px;
	height:300px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
}

#menu{
	width:1000px;
	height:50px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	padding:0;
}

#content{
	width:1000px;
	height:auto;;
	min-height:800px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(../Images/background.jpg);
	background-repeat:no-repeat;
	background-color:#FFF;
	overflow:hidden;
}

#advert {
	width:800px;
	height:200px;
	margin:50px 100px;
}

#main{
	width:900px;
	height:auto;
	margin-left:50px;
	overflow:hidden;
}

#footer{
	background-image:url(../Images/footbg.jpg);
	width:1000px;
	height:200px;
	margin-left:auto;
	margin-right:auto;
}

/* Telephone exchange fonts */

.extitle {
	font-family:"Arial Black", Gadget, sans-serif;
	font-size:30px;
	text-shadow:2px 2px 5px #00FFFF;  
}

.extext {
	font-weight:bold;
	color:#0000FF;
	font-size:20px;
	text-shadow:4px 2px 5px #FFF;
}

/* Sign Up */

#signup {
	width:435px;
	height:auto;
	float:left;
	overflow:hidden;
	margin-left:10px;
}

#signuptop {
	height:12px;
	width:435px;
	background-image:url(../Images/signuptop.fw.png);
	background-repeat:no-repeat;
}

#signupbottom {
	height:12px;
	width:435px;
	background-image:url(../Images/signupbot.fw.png);
	background-repeat:no-repeat;
}

#signmiddle {
	width:425px;
	height:auto;
	background-image:url(../Images/signupmid.fw.png);
	background-repeat:repeat-y;
	padding-left:5px;
	padding-right:5px;
	overflow:hidden;
	
}

#signbutton {
	background-image:url(../Images/signupbutton.fw.png);
	width:150px;
	height:70px;
	margin-right:auto;
	margin-left:auto;
	display:block;
	text-align:center;
	line-height:30px;
}

#signbutton a {
	width:150px;
	height:70px;
}

#signbutton a:hover {
	background-image:url(../Images/signupbuttonover.fw.png;
	width:150px;
	height:70px;
}

/*#signbutton span {
	display:none;
}*/

#signform {
	width:425px;
	height:auto;
	overflow:hidden;
}

/* About */

#promo {
	margin:10px;
}

#promo iframe {
	width:420px;
	height:315px;
}

/* Shop*/

#shop {
	width:900px;
	height:700px;
	margin-left:auto;
	margin-right:auto;
}

#shop iframe {
	width:900px;
	height:700px;
}


/* Footer */

#quickbar {
	height:180px;
	width:290px;
	margin-left:10px;
	margin-top:10px;
	float:left;
}

#services {
	height:180px;
	width:290px;
	margin-left:10px;
	margin-top:10px;
	float:left;
}

#quickbar ul, #services ul {
	margin:0;
	padding:0;
	height: 180px;
	width:290px;
}

#quickbar ul li, #services ul li {
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline;
	height:30px;
	width:290px;
	float:left;
	line-height:30px;
}

#quickbar ul li a, #services ul li a {
	display:block;
	height:30px;
	cursor:pointer;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#009;
}

#quickbar ul li a:hover, #services ul li a:hover, #address a:hover {
	color:#900;
	text-decoration:underline;
}

#contact {
	height:180px;
	width:auto;
	margin-left:10px;
	margin-top:10px;
	float:right;
}

#address a {
	cursor:pointer;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:none;
	color:#009;
}

/* Contact Page */

#contactdetails {
	width:360px;
	height:auto;
	float:left;
	margin:10px;
	font-size:20px;
	color:#00C;
}

#contactdetails strong {
	font-size:16px;
	font-weight:bold;
	color:#000;
}

#map {
	height:auto;
	width:498px;
	margin:10px;
	float:right;
	border: 1px solid #aaa;
}

#map p {
	text-align:center;
}

#map a {
	font-family:"Arial Black", Gadget, sans-serif;
	text-decoration:none;
	color:#000;
}

#map a:hover {
	color:#00C;
}

#map iframe {
	width:498px;
	height:500px;
}

/*Form*/

#contactform {
	width:360px;
	height:auto;
	float:left;
	margin:10px;
	overflow:hidden;
}

#contactform p {
	text-align:left;
}

#formdetails {
	height:auto;
	overflow:hidden;
}

#formdetails input {
	border: 1px solid #aaa;
	width:200px;
	float:right;
	margin-right:50px;
	margin-top:3px;
}

#formdetails label {
	float:left;
	margin-top:3px;
}

#formdetails3 {
	width:180px;
	float:left;
	height:auto;
	overflow:hidden;
}

#formhide {
	width:180px;
	float:left;
	height:auto;
	overflow:hidden;
}

#formdetails3 option[value='other'] {
}

#formmessage {
	margin-top:10px;
	width:360px;
	overflow:hidden;
}

#formmessage textarea{
	width:250px;
	height:100px;
}


/* Messages */

.error {
	margin: 15px 0;
	padding: 10px 0 10px 15px;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	
	border: 1px solid #961f19;
	
	box-shadow: inset 0 1px 1px #ed8d88, 0 1px 3px rgba(0, 0, 0, 0.4);
	
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	*background-color: #bd362f;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
	filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

.error ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.error ul li {
	margin: 5px 0;
}

.success {
	padding: 10px 0 10px 15px;
	
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	
	border: 1px solid #10272e;
	
	box-shadow: inset 0 1px 1px #5f98b0, 0 1px 3px rgba(0, 0, 0, 0.4);
	
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	*background-color: #1e3d47;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#266078), to(#1e3d47));
	background-image: -webkit-linear-gradient(top, #266078, #1e3d47);
	background-image: -o-linear-gradient(top, #266078, #1e3d47);
	background-image: linear-gradient(to bottom, #266078, #1e3d47);
	background-image: -moz-linear-gradient(top, #266078, #1e3d47);
	background-repeat: repeat-x;
}

.success p {
	margin: 0;

Kind Regards

**gemzilla** · 08-30-2013, 09:21 AM

PHP/HTML

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>


<link rel="stylesheet" type="text/css" href="CSS/style.css"/>
<link rel="stylesheet" type="text/css" href="CSS/menu.css"/>

<script type="text/javascript" src="js/js.js"></script>

</head>

<body>



<?php include('includes/banner.php'); ?>



<div id="content">


	<div id="main">
    
    <img src="Images/exchange_title.fw.png">
    <p> Dear Thanet,</p>
    <p class="extitle">Get a Load of This!</p>
    
    <ul class="extext">
      <li>Super fast Broadband      </li>
      <li>Full feature telephone lines</li>
      <li>Extremely cheap call rates (<a href="#">see for yourself</a>), plus free calls between Kent Tec customers</li>
      <li>Help is just arround the corner and we are happy to assist</li>
      </ul>
    </p>
    
    
    <div id="signup">
    	<div id="signuptop"></div>
    
    	<div id="signmiddle">
    	  <p><img src="Images/standardpackage.fw.png" class="centre"></p>
    	  <p><img src="Images/pricetag2.fw.png" class="right"></p>
    	  <p>&nbsp;</p>
    	</div>
        
        <div id="signmiddle">
        	<div id="signbutton"><a href="javascript:void(0);" onclick="ReverseDisplay('signform-01');"><span>broadband and lines sign up</span></a></div>
        </div>
        
        <div id="signmiddle">
        	
            <div id="signform-01" style="display:none;">
				<p>Entry 1 - blah, blah...</p>
				<p>Entry 1 - blah, blah...</p>
				<p>Entry 1 - blah, blah...</p>
			</div>

            
        </div>

    	<div id="signupbottom"></div>      
    </div>
    
    
    
    <div id="signup">
    	<div id="signuptop"></div>
    
    	<div id="signmiddle">
    	  <p><img src="Images/businesspackage.fw.png" class="centre"></p>
    	  <p><img src="Images/pricetag1.fw.png" class="right"></p>
    	  <p>&nbsp;</p>
    	</div>
        
        <div id="signmiddle">
        	<div id="signbutton"><a href="#"><span>broadband and lines sign up</span></a></div>
        </div>
        
    	<div id="signupbottom"></div>      
    </div>
    
    
    
      
  </div>

</div>

<?php include('includes/footer.php'); ?>

</body>
</html>

**jscheuer1** · 08-31-2013, 02:38 AM

Um, that's not a sprite. A sprite is a single image that is larger than the element that it's the background for, it changes appearance - say, on hover because the background position changes on hover. The main advantage of a sprite is that, since it's already loaded, simply shifting its position results in a seamless change of the appearance. It also generally saves on bytes, one image usually is less bytes than two images representing the same thing

What you have are two separate background images, one for the div and one for hover of the a tag.

That can work too, but unless you preload the background image for the hover, there will be a slight lag at times on hover before it appears for first time visitors.

That has nothing to do with why it isn't working at all though. Two things are impacting that. One is a typo (missing closing parenthesis for the url, added below in red, from line #179 of kent-telephones.ismywebsite.co.uk/CSS/style.css):

Code:

#signbutton a:hover {
	background-image:url(../Images/signupbuttonover.fw.png);
	width:150px;
	height:70px;
}

The other is that in order for the background image to show as intended, the a tag must be display block or inline-block. Since it's already inside a block level element (the div), block will be fine here, add the highlighted as shown (same file, line #174):

Code:

#signbutton a {
	display: block;
	width:150px;
	height:70px;
}

BTW, since you already specify the width and height there, it need not be specified again in the :hover declaration, but doing it both places doesn't hurt anything.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**coothead** · 08-31-2013, 07:59 AM

Hi there gemzilla,

to help you get started with "sprites" I have made an example for you, using your images.

I prefer to put the background-image within a "span element" to obscure the link text.

This ensures that your link will work in all possible scenarios.

coothead