cash loans
21 May 2009

Fixing the IE8 Form Button with Background Image On Click CSS Bug

That’s really the best title I could come up with to describe this head-banger of a bug I’ve encountered. I searched and scoured the tubes of the Internet, but couldn’t find anyone talking about it, so I thought I’d share my experience so far.

From my testing, I’ve found this is only an issue in Internet Explorer 8 (hats off to Microsoft for a brand new CSS bug).

The Setup

The setup for this bug is fairly straightforward. It requires a <button> or submit <input> that has a background image. For this example, I’ll use the <button> element. I’ll also be using image replacement to hide the button’s HTML text. I believe this makes the bug more apparent, though it has nothing to do with the actual bug.

The markup:

<button type="submit">Submit</button>

The CSS:

button {
	background: url(button.png) no-repeat 0 0;
	border: 0;
	display: block;
	height: 30px;
	margin: 0;
	padding: 0;
	text-indent: -9999px;
	width: 81px;
	}
button:hover {
	background-position: 0 -30px;
	}

Experiencing the Bug

On first glance, it appears that everything is fine in IE8. The problem occurs when the button is in its active state. Upon clicking the button, the background image shifts -1px to the top and left, though the container of the button stays in the same position. Here’s a demo (view this in IE8) of the bug in action, and here’s a screenshot (I’ve added a red outline to help illustrate the background shift):

So how do you fix this?

I was able to find some workarounds for this bug, and though none are completely bulletproof, all are better than the alternative (doing nothing).

Solution 1: Mo’ Markup + Mo’ CSS (demo)

One option is to add an extra element within the <button> and target that element for the background-image. We can use the same base CSS from The Setup with some additional IE-specific CSS.

The markup:

<button type="submit"><span>Submit</span></button>

The IE-specific (version 8 and below) CSS:

button {
	position: relative;
	}
button span {
	background: url(button.png) no-repeat 0 0;
	height: 30px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	}
button:hover span {
	background-position: 0 -30px;
	}

There are a number of problems with this solution.

  1. Requires extraneous markup.
  2. Will not work for a submit <input> element, as it does not allow for any child elements.
  3. Requires IE specific CSS to absolutely position the extra element – neglecting to do so will result in an opposite 1px shift to the right and bottom in IE (version 8 and below). If this CSS is not targeted for IE, Mozilla browsers (at least Firefox 2 and 3) exhibit a different bug altogether (a topic for a future post).

Because of the problems associated with this solution, I don’t recommend this approach.

Solution 2: JavaScript-only

I’m sure this could be fixed using IE8-targeted JavaScript, but I’d rather not rely on it, as it would break down if the browsing device has JavaScript disabled or lacks JavaScript support. Let’s try a CSS-only method (my preference)…

Solution 3: CSS-only (demo)

With the release of IE8, Microsoft has added several proprietary CSS extensions. Each of these extensions work in IE8, but not in previous IE versions, or any non-IE browsers. Because this bug is isolated to IE8, we can take advantage of these extensions.

The CSS:

button:active {
	-ms-background-position-x: 1px;
	-ms-background-position-y: -29px;
	}

This CSS counters the bug, by positioning the background top and left 1px. This offset is relative to the button’s hover state, using the height dimension to offset the y-axis (in this case 30px height -1px offset results in -29px for the y-axis offset). If your button has no hover state, the offset would be relative to the button’s default background position. This can be safely included in your main stylesheet without affecting other modern browsers, but as a best practice I’d recommend including this in a separate IE stylesheet along with any other IE-specific CSS (using CSS conditional comments to target IE).

As I mentioned, none of the solutions are bulletproof and that includes this one. If you click the button and drag your cursor off the button’s boundaries, the background shift is visible. I feel that this type of interaction is atypical and most users will click the button without much movement, so this is my recommended approach for the time being.

In Conclusion

I’d love to hear any alternative solutions for this issue. Track and vote for this bug on Microsoft Connect.

posted by Cory Duncan

thinking about… CSS, HTML, Research

27 Comments…

  1. Don said…

    Great post – I was searching for the same thing I used option #3 which worked great. Thanks for posting this – I was searching for hours..

    5:01 pm / May 24th, 2009

  2. Tina said…

    oh great! another IE8 only bug! – Bookmark!

    8:45 pm / May 24th, 2009

  3. Dave said…

    Fixed a navigation button problem. Thanks!!

    6:38 pm / May 25th, 2009

  4. Jeremy Frank said…

    I just ran into this bug today on a project I am working on. Thanks for the info. I’ll be implementing the css only fix.

    12:34 pm / May 28th, 2009

  5. Dan Rivard said…

    Good fix. The CSS image shift works for now. It seems like we should be able to add a little bit ‘mo css to fix the drag-off side effect.

    8:28 am / June 12th, 2009

  6. Thanks for sharing. Hopefully someone will also find a fix for IE8′s crappy 24-bit transparency support. I suggest adding one thing to your CSS:

    cursor: pointer;

    11:45 pm / July 21st, 2009

  7. Cory Duncan said…

    @Chuck

    IE8 (and IE7) actually do support alpha transparency in PNG24s. Versions 6 and below do not.

    I typically do use cursor: pointer for button elements. Since this post documents an IE bug and solution, I kept the base CSS as simple as possible, so I intentionally left out certain declarations (like cursor: pointer) that didn’t help illustrate the bug or solution.

    9:10 am / July 22nd, 2009

  8. Josh Pope said…

    Rad! Thanks guys!

    2:59 pm / August 11th, 2009

  9. gabka said…

    Thx for fix. I have a problem with it. It works just when I click the button outside the text on it. If I click on the text, it’s still buggy.
    Any idea?

    Thanks!

    11:38 am / October 24th, 2009

  10. Boris said…

    By the way, this is NOT a bug … it’s a “feature” of the IE7 and IE8, or in another words – it’s the way the IEs treat a – they add a button-like push-down effect on them by default.

    It drives my nuts, too – so thanks for your two ideas to get rid of that. ;)

    10:06 am / October 29th, 2009

  11. Derek said…

    I can explain gabka’s problem, because I am now experiencing it. The fix doesn’t appear to work if you use a submit input element. The button works fine if you click on the outer edges of your button, but if you click on the display text, then the bug shows up again. I tested with a button element and your fix worked very well.

    10:02 pm / November 3rd, 2009

  12. rderr said…

    @gabka

    I had the same issue…the solution #3 mentioned above fixed the shift when clicking on the image of the button, but clicking on the text of the button produced the same bug. I did find a fix however! Apply the same shift to .button:focus like:
    button:focus{
    -ms-background-position-x: 1px;
    -ms-background-position-y: -29px;
    }
    Note: both fixes work fine for a quick click …however clicking and holding then moving the mouse off of the button also has an image shift…

    7:19 am / November 18th, 2009

  13. staypuftman said…

    Very interesting catch here.

    I think this is a larger issue with IE8 though. There is a bug in absolute positioning CSS2.1 spec in IE8 that was previously ok in both IE6 and IE7.

    Here is another instance of it:
    http://stackoverflow.com/questions/1559496/ie8-css-absolute-positioning-random-bug

    It seems IE8 cannot apply a ‘top’ value to any absolutely positioned element loaded in the background. They themselves may have even been aware of this limitation, as this custom ms-background css tag fixes that exact problem.

    I guess we can hope IE9 addresses this? I personally cant wait for a world with IE6, 7, 8 and 9 existing side by side. Can you?

    1:07 pm / December 30th, 2009

  14. Andy Dorman said…

    I tried implementing this and it doesn’t seem to work if you actually hook up the button to a form.

    When you submit the form the background image still moves when you release the mouse button – it’s like it’s picking up another “down” state when the button is neither active or focussed.

    So, to clarify, the background stays put when you click on it but shifts when you release…

    How annoying…

    4:35 am / January 28th, 2010

  15. surfer said…

    I have been searching for ages for a solution. The one in this post didn’t work for me, I think because I was using it for an input button and was still getting the 1px shift.

    The only solution I have found that works, and is just css, is here -

    http://www.jldcreative.com/blog/details/Sexy-buttons-with-CSS-a-minor-improvement.html

    It works perfectly in IE8, IE7, Firefox, Opera and Safari. Take a look.

    6:14 am / March 5th, 2010

  16. surfer said…

    About my previous comment, forgot to mention that this solution also works with Chrome -

    http://www.jldcreative.com/blog/details/Sexy-buttons-with-CSS-a-minor-improvement.html

    It is based on the sliding doors technique.

    6:23 am / March 5th, 2010

  17. AL said…

    Found fix for sliding doors image which works in IE8. See bottom of following post, comments by Tim Sheiner on 12/02: -

    http://www.filamentgroup.com/lab/update_styling_the_button_element_with_css_sliding_doors_now_with_image_spr/

    3:10 am / March 10th, 2010

  18. Pedro said…

    tks for the solutions, is a shit! bug, but…very tks :)

    10:08 am / June 4th, 2010

  19. folding sliding doors said…

    The button works fine if you click on the outer edges of your button, but if you click on the display text, then the bug shows up again. I tested with a button element and your fix worked very well. i agree to this.

    11:55 pm / September 2nd, 2010

  20. [...] Styling the Button Element with CSS Sliding Doors – now with Image Sprites and IE 8 SupportFixing the IE8 Form Button with Background Image On Click CSS Bug Etiketler: butonu stillendirmek, styling button PAYLAŞ:Tweet!FriendFeed'de Paylaş!Facebook'da [...]

    5:10 am / November 10th, 2010

  21. Your a life saver! This worked perfectly! Thanks!

    12:10 pm / February 9th, 2011

  22. Jura Koleda said…

    Thank you very much! You have spared hours of my work time. )

    6:50 am / October 26th, 2011

  23. Eyewebmaster said…

    Thanks for this cools simple tips on how to create a lovely button with an image background..

    I’ve been looking some help but your article was simpler and easy to navigate.

    Thanks once again..

    9:09 am / November 29th, 2011

  24. Nancy said…

    Unfortunately it works for IE9 as well (Solution no 3), which was fine before. Now it looks good in IE8 and moves in IE9. I guess is the solution then.
    Thanks for your solutions.

    7:52 am / December 9th, 2011

  25. Muthukumar Arumugam said…

    Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. Tried the above CSS solution, but couldn’t fix it. With this doctype change the issue is fixed. Your posting helped to search for the hover issue. Thanks.

    Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

    9:32 am / December 23rd, 2011

  26. Muthukumar Arumugam said…

    Thanks, great explanation. It helps.

    Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. Tried the above CSS fix too, but could not fix for textbox. With the following doctype at the top of the document the issue is fixed. Your posting help me to look for hover issue.

    Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375

    9:59 am / December 23rd, 2011

  27. erilem said…

    Thanks for this post.

    With solution 3 (CSS-only) one can still see the background shift by double-clicking the button.

    6:32 am / February 6th, 2012

Have a comment?