I am redoing my site utilizing CSS Sprites for all my navigation and background images. But I've come across a problem when using classes.

I have already made a nav menu using ID's and it works fine, but now I am working on some other portions of the site where classes seem more appropriate (since I will need to assign multiple classes to some elements). But when I use the class selectors the images do not show up in the browser.

 

Here's the code

 

CSS first

 

.sprite
{
background: url(images/pageElements/pageLayout.png)
no-repeat;
}
.logo
{
float: left;
width: 160px;
height: 159px;
background-position: 0 -356px;
}

 

And the HTML

<a href="index.php">
<img src="images/pageElements/transparent.gif" class="sprite logo" />
</a>

 

When I test this in the browser no image appears. Any ideas?

I might be wrong, but you would be better off doing this:

 

.logo
       {
       float: left;
       width: 160px;
       height: 159px;
       background: url(images/pageElements/pageLayout.png) no-repeat 0px -356px;
       text-indent:-9999px;
       }

.logo:hover
       {
       background: url(images/pageElements/pageLayout.png) no-repeat 0px 0px;
       }

 

HTML

<div class="logo">
<h1>Your Logo Plain Text Goes Here</h1>
</div>

 

If that is infact what you are trying to achieve

I might be wrong, but you would be better off doing this:

 

.logo
       {
       float: left;
       width: 160px;
       height: 159px;
       background: url(images/pageElements/pageLayout.png) no-repeat 0px -356px;
       text-indent:-9999px;
       }

.logo:hover
       {
       background: url(images/pageElements/pageLayout.png) no-repeat 0px 0px;
       }

 

HTML

<div class="logo">
<h1>Your Logo Plain Text Goes Here</h1>
</div>

 

If that is infact what you are trying to achieve

Not quite. There is no rollover effect for this particular instance. And for the sake of argument we can take away the <a> tags all together.

 

The problem is that the image is just not showing up. I did some further testing and found that when I combined the two classes into one, it worked fine. But I really want them separate to lighen my css a bit. Basically, I want one class to assign the background image, and then separate classes assign dimensions and position. But for some reason, when I separate the dimension and the background like this, the image does not show up. I wonder if it has something to do with the dimensions not being assigned, and so I am left with a 0 px image????

CSS directive "background-position: 0 -356px;" make background image go out of visibility.

CSS directive "background-position: 0 -356px;" make background image go out of visibility.

I'm sorry, I don't quite understand that. I am using background-position to shift my sprite map to the appropriate location.

After further testing I have found that this simply does not work with two classes. I was under the impression that two classes could be applies to one element, am I wrong. Is my syntax wrong? When I condense them into one tag, it works fine. But again, my goal is to have two separate classes.

I am using background-position to shift my sprite map to the appropriate location.

Sorry, you did not point that this is rollover in your first post.

But the code works!

<style>
.sprite
	{
	background: url(http://www.webdesignerforum.co.uk/public/style_images/master/logo.png)
	no-repeat;
	}
.logo
	{

	width: 160px;
	height: 159px;
	background-position: 0 -36px;
	}
.logo:hover 
	{
	background-position: 0px 0px;
	}
</style>
<a href="index.php">
<img src="http://kultura.kubangov.ru/www/kultura.nsf/imx/dot.gif" class="sprite logo" />
</a>

Notice, that IE6 supports pseudo-class :hover only for A elements.

You can apply two classes to one element if separated without a comma or semicolon, the second will take priority if there are any similar styles in both:-

 

<div class="style1 style2">.........</div>

Sorry, you did not point that this is rollover in your first post.

But the code works!

<style>
.sprite
	{
	background: url(http://www.webdesignerforum.co.uk/public/style_images/master/logo.png)
	no-repeat;
	}
.logo
	{

	width: 160px;
	height: 159px;
	background-position: 0 -36px;
	}
.logo:hover 
	{
	background-position: 0px 0px;
	}
</style>
<a href="index.php">
<img src="http://kultura.kubangov.ru/www/kultura.nsf/imx/dot.gif" class="sprite logo" />
</a>

Notice, that IE6 supports pseudo-class :hover only for A elements.

 

I copied this code into my site exactly as you have it here. On my testing server it did not work! I am at the end of my rope!

Look - it works in FF:

http://volodko.ru/tuning/hover.html

 

Can you drop your link here?

Look - it works in FF:

http://volodko.ru/tuning/hover.html

 

Can you drop your link here?

goto www.seriousaboutfun.com

I have MAMP for testing, but I also use this domain as a staging ground for some projects. the code I showed you should place a logo in the upper left corner. To see what it should look like, you can visit www.3RingEntertainers.com. This is a completed (but with messy code) version of the site

Could this line be causing problems in css

//Class to apply to all elements referencing the sprite//

 

should it not be?

/*Class to apply to all elements referencing the sprite*/

Ok, I am now dumfounded!! I included the style right in the document and it worked fine. But with the identical styles placed in the linked style sheet it did not work!

Hmm

Mate, but there is not

.logo:hover

{

background-position: 0px 0px;

}

in

http://www.seriousaboutfun.com/main.css

!

Could this line be causing problems in css

//Class to apply to all elements referencing the sprite//

 

should it not be?

/*Class to apply to all elements referencing the sprite*/

HOLY COW!!! I HATE when it turns out to be something like that. Thank you, thank you, a thousand times thank you!