
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Cowie and Fox &#187; accessibility</title>
	<atom:link href="http://www.cowieandfox.com/blog/tag/accessibility/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.cowieandfox.com/blog</link>
	<description>The Agency of Change</description>
	<lastBuildDate>Wed, 25 Jan 2012 22:41:02 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Cross Browser Compatible Sprite Buttons</title>
		<link>http://www.cowieandfox.com/blog/2010/03/cross-browser-compatible-sprite-buttons/</link>
		<comments>http://www.cowieandfox.com/blog/2010/03/cross-browser-compatible-sprite-buttons/#comments</comments>
		<pubDate>Fri, 05 Mar 2010 21:58:28 +0000</pubDate>
		<dc:creator>velko</dc:creator>
				<category><![CDATA[Interactive]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[compatibility]]></category>
		<category><![CDATA[cross-browser]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[ie7]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://www.cowieandfox.com/blog/?p=1251</guid>
		<description><![CDATA[You want to turn a button into a sprite, but you also want to have the text there for accessibility!
What do you do? You use the text indent property:
text-indent:-6000px; overflow:hidden; cursor:pointer;
Have you checked IE7? If the text is still there, try this:
color: transparent; text-transform: capitalize;
Yes, it is a hack, but it works great. And yes, [...]]]></description>
			<content:encoded><![CDATA[<p>You want to turn a button into a sprite, but you also want to have the text there for accessibility!</p>
<p>What do you do? You use the text indent property:</p>
<p><strong>text-indent:-6000px; overflow:hidden; cursor:pointer;</strong></p>
<p>Have you checked IE7? If the text is still there, try this:</p>
<p><strong>color: transparent; text-transform: capitalize;</strong></p>
<p>Yes, it is a hack, but it works great. And yes, you do have to have the capitalize transform or else it won&#8217;t work.</p>
<p>Here is everything you need to get your super awesome usable sprites working across all browsers:</p>
<p><strong>.mybutton{background:transparent url(&#8221;mybackground.png&#8221;) 0 0 no-repeat; border:none;  text-indent:-6000px; overflow:hidden; cursor:pointer; color: transparent; text-transform: capitalize;}</strong><br />
have fun!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.cowieandfox.com/blog/2010/03/cross-browser-compatible-sprite-buttons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

