Oh Boy! css .hover over sprite buttons which are positioned non-linearly AND which have a background image.

The icons in the picture below are found here. The Game Plan

I have a two-state sprite for that image. I would like do a state-change-on-hover for those icons. The problem is the icons are not positioned in a single neat row AND, there are big static parts one would not like to download twice.

Sprite Alignment

I have started using sprite images to cut down on download time. I'm having an issue. Basically the sprite image displays outside of the span it's in until I click on it. Perhaps you have an idea on why this is happening or perhaps I'm doing something CSS doesn't like. Here's an example of a document that has the new code that contains the sprite:

http://skylab.ironclads.com/P&P/pp682Dev.nsf/(DO)?OpenAgent&TEMP=JklEPTMyMUFFQjlDREZCRDI1MDU4NzI1Nzk4QjAwN0NFMTcxJkxDSz1ZZXM=&LGN=UE5QQXV0bzEwIExvZ2luVXNlci9Jcm9uY2xhZHM9U0tZQjhNVTdFUA==

Strange behavior with image sprites in ie7 en ie8 (but not in later version of ie8)

I'm using image sprites in the menu on this site:

http://www.ekadaksha.webpolish.nl

In ie 7 and earlier versions of ie8 it doesn't work like it should work.

The home button is repeated where the other images should be. The hover and active state are working fine.

This is the css for the menu:
/*MENU*/
#menu {
clear:both;
}
#inmenu {
height:69px;
padding-left:10px;
}
#inmenu ul li {
float: left;
list-style-type: none;
}
#inmenu ul li a {
background: transparent url(../images/menu.gif) no-repeat;
display: block;
height:69px;

Using CSS sprites to replace icon buttons on website

I’m currently evaluating the use of CSS sprites to reduce the number of individual images on my website, hence the necessary number of http requests. In my case, these images are mostly various types of icon buttons (e.g. for links to social media sites such as Facebook and Twitter. Rollover effects do not play.

I have searched this site and looked at some examples such as the one on the blog of A Kist Apart. Most of what I’ve found uses an <ul> with a background image (the sprite) and then positions the <li> items relative to that background image.

CSS SPRITES

Smile
Hi, I am new to CSS SPRITES and it great to work with SPRITES but creating those SPRITES is a bit difficult for me ......

Is there any tool available for making those SPRITES .

Thanks in Advance.........

Syndicate content