ie6 css fixer v0.95/removing extra padding from buttons

One can roam the internet for years and still fail to find some of the more obvious places to visit. No matter how much time I spend reading and following up html and css developments, it always turns out there are some glaring things that slipped by. The following update to the ie6 css fixer is one of them, making it a pretty valuable and welcome addition to the already long list of automatic fixes it provides for you. Bear with me.

buttons and paddings

If you ever had to develop for Internet Explorer you already know it can be a strange little beast. Still, most bugs seem to have some kind of logical background. There are a couple of issues though that seem to defy any kind of human logic and with no fix at hand will drive you mad whenever you run into them. The following issue definitely belongs into this latter category.

The left and right padding inside a button (defined by an input[type="submit"] or button tag - doesn't matter) will increase in ie6 and ie7 depending on how much text is entered in the value attribute. So if you put a lot of text in your button, the left and right padding will increase without any possibility of altering this through the regular channels. In simple forms this is usually not much of an issue (except that it looks ugly), but when working with buttons in limited spaces (buy-buttons on e-shop websites) it can quickly turn your css into a true nightmare.

Now, I've always thought this issue was impossible to fix and would only die together with ie6 and ie7. Apparently a fix has been available for quite a few years now, it's almost impossible how I could've missed that considering the pain this particular bug has caused me in the past. The good news is that the fix is easy to integrate into the ie6 css fixer, so rejoice! Your input/padding problems will be fixed from now on!

the fix

I haven't bothered finding out the true source of the fix (sorry!), but Viget Inspire gives a good recap of what needs to be done to get ie6 and ie7 to comply to the standard behavior. I've been doing some testing myself and it seems the width:auto; addition isn't even needed to make the fix work. We'll be leaving it out for now as it can conflict with earlier defined statements. If it still turns out to be essential we'll update our tool as quickly as possible.

input, button {overflow:visible}

Some additional testing revealed that the overflow:visible fix has no negative effects on other input elements, which allows us to simply add this single line to the css output and have it done with. It's a lot quicker than running through the whole stylesheet and the chance of missing certain buttons (if only styled by classname for example) is down to 0. All good!

input[type="submit"], button {overflow:visible}

If you opt to receive the inline ie7 hack we even improved the syntax a little so only the submit inputs are targeted. Sadly ie6 doesn't understand this syntax so this is an ie7 solution only. And that's about it really. A simple fix, one that is actually stylesheet-independent and can even be added to a reset css or something similar. But as this fix is only relevant in ie6 and ie7 it deserves a place in our little tool.

One word of warning though. This is listed as a "safe fix", which it is if you apply it before the actual css debugging. If you add the fix on a site that's already been debugged chances are things will look quite bad (as you probably worked around the extra padding by adapting some other values for ie6/ie7 specifically). For existing sites, use at your own risk or just uncheck the option to include the fix.

Try out v0.95 now if you want to see the improvements.

conclusion

With the rework of this blog we've decided to postpone the 1.0 version just a little longer. The rework might even involve some front-end changes to the ie6 fixer tool so it would be nice to launch all of that together. And as this fix is quite small (and not even stylesheet-dependent) we've opted to raise the version only 0.05 points.

As always, we welcome feedback. Hope you enjoy the new feature!