<?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>onemoretake &#187; css</title>
	<atom:link href="http://www.onemoretake.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.onemoretake.com</link>
	<description></description>
	<lastBuildDate>Tue, 20 Jul 2010 08:28:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Accurate Ems</title>
		<link>http://www.onemoretake.com/2009/03/24/accurate-ems/</link>
		<comments>http://www.onemoretake.com/2009/03/24/accurate-ems/#comments</comments>
		<pubDate>Wed, 25 Mar 2009 09:56:26 +0000</pubDate>
		<dc:creator>dan</dc:creator>
				<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.onemoretake.com/?p=182</guid>
		<description><![CDATA[Whilst supporting browsers that have no full-page zoom and keeping the accessibility at a maximum, the use of ems in your style sheet is a must. This is not a difficult thing to do and you can still think in terms of pixels, thanks to great tools like the Em Calculator. A word of warning [...]]]></description>
			<content:encoded><![CDATA[<p>Whilst supporting browsers that have no full-page zoom and keeping the accessibility at a maximum, the use of <a href="http://mondaybynoon.com/2006/03/13/effective-style-with-em/">ems in your style sheet is a must</a>. This is not a difficult thing to do and you can still think in terms of pixels, thanks to great tools like the <a href="http://riddle.pl/emcalc/">Em Calculator</a>.</p>
<p>A word of warning however. If you don&#8217;t specify your font-sizes with enough accuracy, it can lead to some strange problems. I came across this when creating a <a href="http://www.alistapart.com/articles/multicolumnlists">multi column list</a>. I used the method where each column is created using a left and a negative top margin. The problem was that because I only used two decimal places for the sizes, my line-heights did not translate a whole number of pixels. </p>
<p>This meant that for each item in the list, the fraction compounded and the total height of each column was not what what I thought &#8211; I ended up with a slanted set of columns. This may have not been an issue except each of the browsers interpret the fraction of pixels in a different manner &#8211; some round up and some round down.</p>
<p>It turns out that using <strong>three decimal places for all Em sizes</strong> will solve this and ensure that fractional pixel sizes are eliminated. This way you get no size differences across the different browsers and more predictable layouts. You can adjust the number of decimal places with the <a href="http://riddle.pl/emcalc/">Em calculator</a> by clicking on the settings tab and adjusting the value there.</p>


<div class="shr-bookmarks shr-bookmarks-expand shr-bookmarks-center shr-bookmarks-bg-knowledge">
<ul class="socials">
		<li class="shr-twitter">
			<a href="http://twitter.com/home?status=Accurate+Ems+-+&amp;source=shareaholic" rel="nofollow" class="external" title="Tweet This!">Tweet This!</a>
		</li>
		<li class="shr-facebook">
			<a href="http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;t=Accurate+Ems" rel="nofollow" class="external" title="Share this on Facebook">Share this on Facebook</a>
		</li>
		<li class="shr-digg">
			<a href="http://digg.com/submit?phase=2&amp;url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;title=Accurate+Ems" rel="nofollow" class="external" title="Digg this!">Digg this!</a>
		</li>
		<li class="shr-linkedin">
			<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;title=Accurate+Ems&amp;summary=Whilst%20supporting%20browsers%20that%20have%20no%20full-page%20zoom%20and%20keeping%20the%20accessibility%20at%20a%20maximum%2C%20the%20use%20of%20ems%20in%20your%20style%20sheet%20is%20a%20must.%20This%20is%20not%20a%20difficult%20thing%20to%20do%20and%20you%20can%20still%20think%20in%20terms%20of%20pixels%2C%20thanks%20to%20great%20tools%20like%20the%20Em%20Calculator.%0D%0A%0D%0AA%20word%20of%20warning%20however.&amp;source=onemoretake" rel="nofollow" class="external" title="Share this on LinkedIn">Share this on LinkedIn</a>
		</li>
		<li class="shr-delicious">
			<a href="http://delicious.com/post?url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;title=Accurate+Ems" rel="nofollow" class="external" title="Share this on del.icio.us">Share this on del.icio.us</a>
		</li>
		<li class="shr-blinklist">
			<a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;Title=Accurate+Ems" rel="nofollow" class="external" title="Share this on Blinklist">Share this on Blinklist</a>
		</li>
		<li class="shr-reddit">
			<a href="http://reddit.com/submit?url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;title=Accurate+Ems" rel="nofollow" class="external" title="Share this on Reddit">Share this on Reddit</a>
		</li>
		<li class="shr-hackernews">
			<a href="http://news.ycombinator.com/submitlink?u=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;t=Accurate+Ems" rel="nofollow" class="external" title="Submit this to Hacker News">Submit this to Hacker News</a>
		</li>
		<li class="shr-googlebuzz">
			<a href="http://www.google.com/buzz/post?url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;imageurl=" rel="nofollow" class="external" title="Post on Google Buzz">Post on Google Buzz</a>
		</li>
		<li class="shr-stumbleupon">
			<a href="http://www.stumbleupon.com/submit?url=http://www.onemoretake.com/2009/03/24/accurate-ems/&amp;title=Accurate+Ems" rel="nofollow" class="external" title="Stumble upon something good? Share it on StumbleUpon">Stumble upon something good? Share it on StumbleUpon</a>
		</li>
		<li class="shr-technorati">
			<a href="http://technorati.com/faves?add=http://www.onemoretake.com/2009/03/24/accurate-ems/" rel="nofollow" class="external" title="Share this on Technorati">Share this on Technorati</a>
		</li>
		<li class="shr-mail">
			<a href="mailto:?subject=%22Accurate%20Ems%22&amp;body=Link: http://www.onemoretake.com/2009/03/24/accurate-ems/ (sent via shareaholic)%0D%0A%0D%0A----%0D%0A Whilst%20supporting%20browsers%20that%20have%20no%20full-page%20zoom%20and%20keeping%20the%20accessibility%20at%20a%20maximum%2C%20the%20use%20of%20ems%20in%20your%20style%20sheet%20is%20a%20must.%20This%20is%20not%20a%20difficult%20thing%20to%20do%20and%20you%20can%20still%20think%20in%20terms%20of%20pixels%2C%20thanks%20to%20great%20tools%20like%20the%20Em%20Calculator.%0D%0A%0D%0AA%20word%20of%20warning%20however." rel="nofollow" class="external" title="Email this to a friend?">Email this to a friend?</a>
		</li>
</ul>
<div style="clear:both;"></div>
</div>

]]></content:encoded>
			<wfw:commentRss>http://www.onemoretake.com/2009/03/24/accurate-ems/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
