<?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/"
	xmlns:creativeCommons="http://backend.userland.com/creativeCommonsRssModule"
>

<channel>
	<title>Geek Notes &#187; XHTML</title>
	<atom:link href="http://www.geek-notes.com/category/xhtml/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.geek-notes.com</link>
	<description>A web developer's blog: languages, search engines, servers.</description>
	<lastBuildDate>Thu, 12 Nov 2009 01:14:45 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>
		<item>
		<title>IE &#8216;three pixel bug&#8217; hacked with float</title>
		<link>http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/</link>
		<comments>http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/#comments</comments>
		<pubDate>Wed, 03 May 2006 16:00:41 +0000</pubDate>
		<dc:creator>Maurizio Petrone</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/</guid>
		<description><![CDATA[
Internet Explorer has a rendering bug called &#8220;Three pixel gap&#8221;.
Substantially, any box, also ones nested into another, that is next to a floated box gets a shrink of three pixel in the same direction of the float.
I&#8217;ve prepared an example to show this. The example document has a valid code for style and markup, then [...]]]></description>
			<content:encoded><![CDATA[<img src="/wp-content/icons/icon_css.gif" width="80" height="80" class="icon" alt="CSS" />
<p>Internet Explorer has a rendering bug called &#8220;Three pixel gap&#8221;.<br />
Substantially, <strong>any box, also ones nested into another, that is next to a floated box gets a shrink of three pixel in the same direction of the float</strong>.</p>
<p>I&#8217;ve prepared an example to show this. The example document has a valid code for style and markup, then it works well with standard-compliant browser like Firefox. But <a href="http://www.geek-notes.com/files/ie_bug_float.htm">try to open this page with Internet Explorer to see the bug in action</a>.</p>
<p>This bug is known, and there&#8217;s already an hack for it. <a href="http://www.positioniseverything.net/explorer/threepxtest.html">Here is a detailed description</a> of both the bug and the hack.<br />
The known hack consists into assign <span class="codespan">height:1%</span> to the buggy box.<br />
<strong> But this hack did not seem working to me</strong>, as you can see from the example source code: <span class="codespan">height:1%</span> has no effect <em>(I suppose it&#8217;s due to the fact that buggy boxes are contained into another, non-floated one &#8211; which the blue-bordered one in the example above)</em>.</p>
<h4><strong>So, I&#8217;ve prepared a different hack.</strong></h4>
<p><span id="more-1"></span>The trick is to <strong>declare floated the box containing the buggy boxes</strong>, and to <strong>fix its margin</strong> using <span class="codespan">!important</span> flag.<br />
<a href="http://www.geek-notes.com/files/ie_hack_float.htm">Here you can see an example of the same page, hacked for Internet Explorer</a>.<br />
<em> Please note: this hack works only with Internet Explorer (tested on v. 5.01 and above). It messes up things other browsers.<br />
</em></p>
<p>The code is really simple. Focusing on example shown above, <span class="spancode">div#container</span> is the box with blue border. It&#8217;s not buggy itself, but it nests the buggy boxes. Here is its CSS code:</p>
<div class="codebox">#container { 	float:left; 	margin-left:18px!important; 	margin-right:28px!important 	}</div>
<p>Of course, if you want to have a document that fits both IE and other browsers, you must have this code interpreted by I.E. only.</p>
<p>Via CSS, you can use &#8220;the star&#8221;. A CSS paragraph that follows <span class="codespan">* html</span> runs only on IE.<br />
Better, you can use <a href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp"><em>conditional comments</em></a> to put a link to your hacked stylesheet (as I do).</p>
<div class="sociable"><span class="sociable_tagline"><strong>Bookmark:</strong><span>These icons link to social bookmarking sites where readers can share and discover new web pages.</span></span><ul>
	<li><a href="http://digg.com/submit?phase=2&amp;url=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;title=IE+%27three+pixel+bug%27+hacked+with+float" title="digg"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/digg.png" alt="digg" /></a></li>
	<li><a href="http://del.icio.us/post?url=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;title=IE+%27three+pixel+bug%27+hacked+with+float" title="del.icio.us"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/delicious.png" alt="del.icio.us" /></a></li>
	<li><a href="http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;title=IE+%27three+pixel+bug%27+hacked+with+float" title="blogmarks"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/blogmarks.png" alt="blogmarks" /></a></li>
	<li><a href="http://co.mments.com/track?url=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;title=IE+%27three+pixel+bug%27+hacked+with+float" title="co.mments"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/co.mments.gif" alt="co.mments" /></a></li>
	<li><a href="http://www.newsvine.com/_tools/seed&amp;save?u=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;h=IE+%27three+pixel+bug%27+hacked+with+float" title="NewsVine"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/newsvine.png" alt="NewsVine" /></a></li>
	<li><a href="http://www.furl.net/storeIt.jsp?u=http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/&amp;t=IE+%27three+pixel+bug%27+hacked+with+float" title="Furl"><img src="http://www.geek-notes.com/wp-content/plugins/sociable/images/furl.png" alt="Furl" /></a></li>
</ul></div>
]]></content:encoded>
			<wfw:commentRss>http://www.geek-notes.com/xhtml/1/ie-three-pixel-bug-hacked-with-float/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	<creativeCommons:license>http://creativecommons.org/licenses/by-nc-sa/2.5/</creativeCommons:license>
	</item>
	</channel>
</rss>
