Code Snippet
Remove Button Text in IE7
HTML:
<input class="button" type="button" value="Go">
.. or ..
<button class="button">Go</button>CSS:
input.button { text-indent: -9000px; text-transform: capitalize; }Negative-indent alone unfortunately doesn't work to remove text from a button element in IE7, but add text-transform: capitalize; and presto!
Cheers for that mate! Been looking around for a solution to remove the submit text in ie7, its been a head scratcher!
The text-transform is an odd one to use, but I guess that is ie for you! Thanks again, Mark.
Wow, Chris strikes again.
I used line-height: -9999px for this problem before and it worked.
Bizarrely in IE tester this method is failing me. I hit up google with the search
“remove text on buttons ie”
Who was on the first page of the SERP?
None other :)
Thanks Chris!
hello
…and IE8 too. Good work – thanks!
{font-size: 0px; line-Height: 0px;}
Does the same thing
On the contrary, {font-size: 0px; line-Height: 0px;} leaves a small black line over the button that is the text at an incredibly small size.
The solution posted here by Chris Coyier has been the only thing I have found that works for me. Thanks so much, Chris!
I`m using padding-left for removing the button text. It`s working exactly
AWESOME! Thanks a bunch!
Fantastic! Thanks so much!
you just saved my life :D
You sir, are a mad genius!
that browser is an asshole.
Pure brilliance, I’d say – thanks so much!
Nice fix… thanks a ton!
Nicely played sir! But what if your browser is 9000px wide. Just kidding!
I didn’t find this worked for IE7 (well, IE8 in ‘IE7 mode’); The text-transform didn’t bring the buttons back from off screen.
What did work was NOT using text-indent or text-transform and instead using:
line-height: 100px;
font-size: 0px;
So while the font-size does leave a tiny line of letters on screen in some browsers, that line of offset by the line-height. (Line-height doesn’t seem to work in Firefox, but Firefox seems to respect the font-size of 0. Use a bigger line-height for bigger graphics.)
You should never have font-size: 0px; if you can avoid it as some assistive technologies will ignore this text altogether (and thereby not know what your button is for). Also, the tiny line of letters is an unwanted artefact for a lot of developers/designers.
This just saved me a lot of hassle, thanks!
Huge help! Thanks!
No f’ing way! Thanks so much for posting this solution – IE is less like programming and more like witchcraft!
letter-spacing:9999em; combined with text-indent also works :)
Hah! I don’t know what it is about the text-transform: capitalize; but it worked like a charm. Thanks.
LOL thats just damn weird. nice one.
So, I used this properties:
font-size: 0px;
line-height: 0px
Works fine.
Rennan, I had tried this as well and then noticed my bg image had moved by a pixel in Safari and Firefox on Mac. You may want to check this if your pixel precision matters. :)
I knew I’d find the solution here!.. I’ve been finding stupid ways around this all year.. haha.. Thanks man :)
Thanks for that Chris, Worked a treat!
Thanks for this, it just works, saved me some more ‘parting with hair’
Work’s fine in IE7 & IE8 – thank you Chris!
That’s insane but it works. Thanks for sharing.
About the most amazing hack ever. You, sir, are a legend.
i would rather call this one unrelated fail lol… totally random and still works.
Thank you very much
oh wow. how did you ever figure this out. :P
Thanks
Wow…really. Fixed my IE7 headache. Thank you.
um, watch out for this.. some browsers will actually create a horizontal scroll bar for the distance you text-indent. Not old browsers, either… the first one that comes to mind is Opera 9.8.
Always cross-browser test!
I can’t freaking believe that worked…
Anything other than inherit and none work fine also.
That said, it doesn’t always work. I’m currently battling with a submit button that indents with the text, therefore also disappearing off the page!
It works elsewhere though, so currently trying to locate the difference(s).
I just want to know how the hell you came across this solution.
Genius!
Hi all.
Try to change negative to positive.
Change
text-intend: -9999px;
to
text-intend: 9999px;
looks like it works.
Thanks much, works like a charm :D
Thank you.
Thank you so much for this fix! I was completely baffled as to how to fix this and this worked :)
kings to you! Great solution, big thanks.
I love these snippets! text-transform really, never see that coming :P
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.