Monday, December 19, 2011

IE7 text-indent bug

I've been debugging an HTML/CSS combination that was supposed to show a button with a nice background while keeping the button text still available (for accessibility, SEO, etc. - have no idea, the code wasn't mine). Users with IE7 (sigh) could not see the button.

The bottom line: there is a situation when IE7 moves the parent element together with its text, having a text-indent CSS rule. Below is a code demonstrating this behavior:

<!DOCTYPE html>
<html>
<head>
<style>
.notxt {
width: 100px;
text-indent: -9000px;
}
</style>
</head>
<body>
<!-- This button will be shown with no text, AS EXPECTED -->
<form>&nbsp;
<button class="notxt">AAAAA</button>
</form>
<!-- This button will not be shown at all -->
<form>
<button class="notxt">AAAAA</button>
</form>


</body>
</html>


Note the &nbsp; between the form and button tags in the first form. This is the "cure" for the IE7 bug. Any text will work, including <br>.

See also a solution that did NOT work for me but might work in some other related cases:
http://css-tricks.com/snippets/css/remove-button-text-in-ie7/