I'm working on styling a link with a background image. The text on the link will change, thus the size of the image will need to change. I obviously don't want to create a different image for each link, so I thought that i would accomplish this with a 'sliding doors technique. Unfortunately, IE6 doesn't like it. The right side of the background image doesn't is off in outer space. One of the issues I'm running into is the fact that this button is on top of a gradient. Thus, I had to use a transparent gif so that I didn't have to worry about the background of the rounded corners lining up with the gradient (because the gradient will be different depending on the location). Anyway here is the HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Test in IE6</title> <style type="text/css"> .orangeButLink{ background:url(bg-button-orange.gif) 0 0 no-repeat; color:#764b00; height:28px; padding:7px 10px 7px 12px; overflow:hidden; line-height:28px; text-transform:uppercase; font-weight:bold; position:relative; } .orangeButLink span{ display:block; width:5px; height:28px; background:url(bg-button-orange.gif) right top no-repeat; position:absolute; right:-2px; top:0px; } </style> </head> <body> <a href="" class="orangeButLink"><span></span>Login</a> </body> </html> Code (markup): If I can't get this to work, are there any other suggestions for accomplishing the same thing? I have attached a zip that includes the image and the html.