Wednesday, February 20, 2008

IE7 Bug on Button Background Images

IE7 has a very weird bug regarding background images on buttons. If you have spiced up your web form buttons by having a defined CSS class (or for the input tag itself) defined something like this with a tiling background image:


.button
{
background-color: #FFAB41;
background-position: left top;
background-attachment: fixed;
background-image: url('Images/ButtonTile.gif');
background-repeat: repeat-x;
border-top: solid 1px #FEF4CF;
border-left: solid 1px #FEF4CF;
border-right: solid 1px #BC8801;
border-bottom: solid 1px #BC8801;
color: #004276;
font-weight: bold;
}


Then you will find it works perfectly in IE6 and other browser but not in IE7. In my case I tested it with a PNG image instead of GIF as well as other changes to no avail.

I found that it works in both IE6 and IE7 by simply removing this line:


background-repeat: repeat-x;


Why? I don't know. In fact, the image shouldn't even tile without this line; however, it does in both browsers and will work fine with this line removed.

Labels: , , , ,

posted by Terry Smith @ 2:35 PM  4 comments
Sponsored Links by Stunique Inc.
Custom Designed Invitations |  Themed Invitations |  Baby Gear |  Baby Gifts |  Personalized Stamps and Embossers |  Party Supplies |  Wedding Accessories |  Wedding Favors |  Wedding Program Fans |  Wedding Invitations |  Wedding Party Supplies |  French Bull Partyware |  Personalized Sweet 16 Sash | 
Sponsored Links by Terry Smith Images
Arkansas Stock Photography |  Paris Stock Photography |  Washington D.C. Stock Photography |  Concept Photography and Illustration |  Stock Photography Archive |  Shutterzone Photography Blog

4 Comments:

At 10:30 AM, Blogger Dan said...

Set your background image's position to bottom right. I haven't tested in IE6, but it does the trick for IE7. I assume it's because it's actually moving the image still constantly, but because it's set to the right position, it appears that it's not moving and keeps it as far to the right as possible, in other words the right edge of the input.

Hope that helps!

 
At 10:15 PM, Blogger procat said...

Set the border, like this

border: 0px solid #FFFFFF;

I found it here
http://forums.digitalpoint.com/showthread.php?t=873398

I try it already, it works for me.

 
At 7:58 AM, Blogger Tim said...

known bug:
http://support.microsoft.com/kb/322240

 
At 10:20 PM, Blogger sinhoseafood said...

just need to do this:

background:url(Images/ButtonTile.gif);

 

Post a Comment

<< Home