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>
.notxt {
width: 100px;
text-indent: -9000px;
<!-- This button will be shown with no text, AS EXPECTED -->
<button class="notxt">AAAAA</button>
<!-- This button will not be shown at all -->
<button class="notxt">AAAAA</button>


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: