IE7 not displaying background in sprite button : Leosquarez

IE7 not displaying background in sprite button

Today while I was creating a new button with the sprite technique I discovered that what it was working in all the browsers (the decent one: Firefox, Safari, Crome and IE8) it wasn’t working in IE7 and the CSS was not applied.

Pretty much while all the browsers were displaying the button as an image, IE7 and IE6 were displaying a resized default button (very ugly!!!)

My initial code was something like that:

#button_id{
width:439px;
height:53px;
border: none;
clear:both;
background-image:url(../images/btn-confirm.png);
background-repeat:no-repeat;
background-position:0 0;
}

I could not understand why just IE7 (and IE6 of course) were having this issues..

In the end I find the solution:
To display a background in a button in IE7 and IE6 you have to set the CSS style background-color

#order_button{
width:439px;
height:53px;
border: none;
clear:both;
background-image:url(../images/btn-confirm.png);
background-repeat:no-repeat;
background-position:0 0;
background-color:#f1f1f1; /* OF COURSE USE YOUR COLOR!! */
}

Popularity: 2% [?]

Posted by leosquarez On June - 8 - 2010 Condition EI6 Web Development

8 Responses to “IE7 not displaying background in sprite button”

Mahandra Varma says:

August 30, 2010 at 1:40 pm

Hi
I am facing that problem in ie8 not in ie7 can you please update it , I puted that background color but its not working
leosquarez says:

August 31, 2010 at 12:21 am

If you paste here the code i’ll have a look.

Ps sometimes this works:
display: block;
John says:

June 17, 2011 at 11:08 am

You Sir are my hero for the day!
Hima says:

June 21, 2011 at 1:07 pm

Thanks a lot. I was struggling for 3 days to resolve above issue
Ramona says:

August 10, 2011 at 9:43 am

I’ve also been struggling for 3 days with this problem and can’t get it work…nothing works..none of the solutions…:( i’m gonna pull my hair out pretty soon (i should mention that i’ve tryied a loooot of possibilities..with/without height and width..etc)

table.complet td.full { background: #ffffff url(”images/icons/star-full-flattened.png”) no-repeat scroll center!important; width: 23px!important; height:23px!important; }
table.complet td.half { background: #ffffff url(”images/icons/star-half-flattened.png”) no-repeat scroll center!important; width: 23px!important; height:23px!important;}
table.complet td.empty { background: #ffffff url(”images/icons/star-empty-flattened.png”) no-repeat scroll center!important; width: 23px!important; height:23px!important; }
leo says:

August 10, 2011 at 10:00 am

i just replied send me the code and i’ll have a look..
hjsplit says:

November 11, 2011 at 2:02 am

Thanks for the info, I must bookmark your website for my reference
how to reverse heart disease says:

November 11, 2011 at 3:05 am

This was a great post, thanks for the info.