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>
<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 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/
No comments:
Post a Comment