16

I want to css sprite (sprite image total width:45px and total height:15px consists of three image ) but there is a problem in IE9/8/7. link and hover work but when click the button (active) sprite image slipping to left 1px. issue for only IE 9/8/7.How can I fix this?

CSS:

body{
    margin:0;
    padding:0;
}

.button{
    background:url(sprite-image.png) no-repeat 0 0;
    width:15px;
    height:15px;
    cursor:pointer;
}

.button:hover{
    background:url(sprite-image.png) no-repeat -15px 0;
}

.button:active{
    background:url(sprite-image.png) no-repeat -30px 0;
}

.cont{
    width:200px;
    height:200px;
    float:left;
    margin:50px 0 0 100px;
}

HTML: 

 <body>
  <div class="cont">
     <div class="button">&nbsp;</div>
  </div>
 </body>

"link" and "hover" and "active" FF,Chrome,Safari,Opera like this;

enter image description here

but IE 9/8/7 active look like this;

enter image description here

I concretized above images to make it look better . My sprite image;

enter image description here

midstack
  • 2,105
  • 7
  • 44
  • 73
  • 1
    Having the same issue, on `:link` and `:hover` works fine but on `:active` doesn't ( works normaly in every browser except IE). Don't know why is that. I fixed it like this [link](http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer) . – Vucko Dec 25 '12 at 12:48
  • @midstack dear you please provide me the sprite image so i can work on that and solve your issues. Give me asap... – w3uiguru Dec 27 '12 at 16:35
  • @HappySingh I edited question, the sprite image like above – midstack Dec 28 '12 at 07:50
  • You know if one pixel is the only problem you have you can edit your sprite to have few pixels around each image... just in case, there are no exact answers in life :) – Ayyash Dec 28 '12 at 10:34
  • You wanna hear a sad thing? I just ran your code in fiddler under IE9, and it works just fine! what's the DocType set to in your HTML? – Ayyash Dec 28 '12 at 10:47
  • 1
    This is just one of sprites, there are alot of sprites and problem for my previous projects. I don't want edit all sprite images for IE I'm trying to solve the problem with css. I set doctype as; – midstack Dec 28 '12 at 12:04
  • are you sure there is no third browser sensitive styles in addition you posted? here is quick prototype http://jsbin.com/agavol/1 based on your data and everything is smooth in every IE – dmi3y Jan 01 '13 at 06:21
  • I think you should try to set initially before you try any other tricks – Ayyash Jan 03 '13 at 11:09

6 Answers6

8

Why not use IE-conditional comments;

 <!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

And then write eg CSS-rules like .lt-ie9 .someclass{}to target a IE-version. I use them to fix some IE-specific css-stuff. No dirty hacks, no hastle just css. Did you check with eg Firebug Lite what happens?! outline: 0 none?

myradon
  • 421
  • 1
  • 4
  • 13
  • 2
    I like this but in this case page load three different CSS which is not good to fix for one issue. – The AV Jan 03 '13 at 07:58
  • There isn't any way to other than conditional comments I think. Thank you everyone for helps – midstack Jan 03 '13 at 13:11
3

Add a Internet explorer specific stylesheet to the <head></head> section.

<!--[if lt IE 9]>
<link rel="stylesheet type="text/css" href="/css/ie.css" />
<![endif]-->

and in ie.css do something like:

.button:active{
    background:url(sprite-image.png) no-repeat -29px 0 !important;
}

(There's Always an issue with ie , phew !)

Amyth
  • 32,527
  • 26
  • 93
  • 135
  • Can be solved only with specific css?Isn't there another way? – midstack Dec 25 '12 at 13:14
  • another workaround could be redoing the sprites image and have more than 1px of space between images – Amyth Dec 25 '12 at 13:17
  • 7
    It's probably worth adding the extra space between sprites anyway, since zooming in other browsers can also cause the sprite to shift so that the neighboring image bleeds through. – cimmanon Dec 25 '12 at 15:06
3

I created a fake sprite using your graphic to see what you are seeing but looking good in my fiddle in all IE 7-9 (note i just change positioning and made it construsive (less):

http://jsfiddle.net/Riskbreaker/Rr8p2/

body{
    margin:0;
    padding:0;
}

.button{
    background:url(images/sprite.png) no-repeat 0 0;
    width:14px;
    height:15px;
    cursor:pointer;
}

.button:hover{
    background-position:0px -27px;
}

.button:active{
    background-position:0px -27px;
}

.cont{
    width:200px;
    height:200px;
    float:left;
    margin:50px 0 0 100px;
}

Remember the positioning I made up so you can adjust. I never had the active IE issue before...but let me know what you are seeing....if the issue persist and you don't want another file then do this:

IE7: *.button:active{background-position:0px -28px;} (or whatever the correct position is )...

IE8: .button:active{background-position:0px -28px\9;}.........

IE9....not sure your latest but it should not have any issues (latest)

Riskbreaker
  • 4,621
  • 1
  • 23
  • 31
3

I have faced similar issues with IE8 before but IE9 worked fine in my case (not sure about IE7 but it must be like IE8 for this thing).

It can be resolved/improved by one of these 2 approaches:

1) Modify the image (maybe in resolution, color combination etc.) and try if it works. Why this might work? Because in your example, IE appears trying to do some image manipulations "intelligently" which unfortunately go wrong at times (especially for small images/pixel perfect cases) and you can just hope that it doesn't fail badly for your new images.


2) Use background-position accuracy of 0.5px units.

    Note "background-position: -15.5px 0;" in the following code. This solution will reduce your frustration by at least 50% :-) I am afraid that you might need to provide IE specific CSS for this solution but that should be fine ... You can add the browser identifier class name on tag using JavaScript or with technique mentioned @ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ and then use those class names when you write browser specific CSS.

The solution:

.button {
    background:url(images/sprite.png) no-repeat 0 0;
    width: 15px;
    height: 15px;
    cursor:pointer;
}

.button:hover {
    background-position: -15.5px 0;
}

.button:active {
    background-position: -30px 0;
}

.cont {
    width: 200px;
    height: 200px;
    float: left;
    margin: 50px 0 0 100px;
}
webextensions.org
  • 731
  • 6
  • 15
  • You can use below trick which will help to give manual value ---------- For IE7 (underscore before the value) .button:hover { background-position: _-15.5px 0; } Or IE-7 & IE-8(need to add\9) .button:hover { background-position: -15.5px\9; } For IE8only (\0/) *+.button:hover { background-position: -15.5px\0/;} – The AV Jan 03 '13 at 05:16
3

You can use below trick which will help to give manual value

For IE7 (underscore before the value)

.button:hover {
    background-position: _-15.5px 0; 
}

Or IE-7 & IE-8(need to add\9)

.button:hover {
    background-position: -15.5px\9; 
}

For IE8only (\0/)

*+.button:hover {
    background-position: -15.5px\0/;
}
The AV
  • 609
  • 3
  • 7
  • 17
2

Try this change in css:

.button{
    background: url(sprite-image.png) no-repeat left 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.button:hover{
    background: url(sprite-image.png) no-repeat center 0;
}
.button:active{
    background: url(sprite-image.png) no-repeat right 0;
}
karacas
  • 2,054
  • 1
  • 19
  • 29