<?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>IE &#8211; here&#039;s what I did&#8230;</title>
	<atom:link href="https://www.hereswhatidid.com/category/development/browser-quirks/ie/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.hereswhatidid.com/</link>
	<description>The Development Blog of Gabe Shackle</description>
	<lastBuildDate>Thu, 15 Nov 2012 15:48:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.4.2</generator>
	<item>
		<title>Update: CSS3 Pie still pretty rough</title>
		<link>https://www.hereswhatidid.com/2011/06/update-css3-pie-still-pretty-rough/</link>
		
		<dc:creator><![CDATA[Gabe]]></dc:creator>
		<pubDate>Fri, 24 Jun 2011 19:19:22 +0000</pubDate>
				<category><![CDATA[Browser Quirks]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>
		<guid isPermaLink="false">https://www.hereswhatidid.com/?p=259</guid>

					<description><![CDATA[After attempting to use the CSS3 Pie method for achieving some CSS3 support in IE browsers I&#8217;ve unfortunately come to the conclusion that it is still far too buggy for any kind of use other than for testing or demonstrations.  It has a pretty significant issue with the way that IE8 and lower hand page [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>After attempting to use the CSS3 Pie method for achieving some CSS3 support in IE browsers I&#8217;ve unfortunately come to the conclusion that it is still far too buggy for any kind of use other than for testing or demonstrations.  It has a pretty significant issue with the way that IE8 and lower hand page zooming in that any background image that you have will remain at it&#8217;s fixed size and simply tile.  <span id="more-259"></span>Here&#8217;s a screenshot showing what my tabbed quotes example looks like after zooming:</p>
<p><img class="alignnone size-full wp-image-260" title="IE Tiling Background Zoom Bug" src="https://www.hereswhatidid.com/wp-content/uploads/2011/06/css3-pie-tile-bug.png" alt="" width="590" height="343" srcset="https://www.hereswhatidid.com/media/2011/06/css3-pie-tile-bug.png 590w, https://www.hereswhatidid.com/media/2011/06/css3-pie-tile-bug-580x337.png 580w" sizes="(max-width: 590px) 100vw, 590px" /></p>
<p>Here are a few other issues that I&#8217;ve run into as well:</p>
<ol>
<li><strong>Noticeable delay on style rendering when page first loads.</strong> When you first load a page using the CSS3 Pie fix there is a small delay before those CSS3 properties are put in place.  This delay increases with every element that has some type of CSS3 style applied to it.  So if you wanted to round the corners on 100 divs on a single page you could be seeing nearly a full half-second delay before those are rendered on the screen.  It appears to be affected purely by machine speed so even people with a very fast internet connection will experience a delay unless they&#8217;re on a powerful machine.</li>
<li><strong>Many &#8220;position: relative&#8221; hacks required on more complex layouts.</strong> The more complex your styling gets the more you have to utilize the &#8220;position: relative&#8221; fix that is recommended on their site to trigger the proper layout method in IE.  This becomes extremely cumbersome as you go on with a layout as it isn&#8217;t necessarily used in the same elements every time, which leads to a lot of wasted time hunting down the particular element which needs the style applied to it.</li>
<li><strong>Sometimes it just doesn&#8217;t work.</strong> Occasionally a page will load and the CSS3 Pie will not load at all this leaving it in the default styles.  This happens infrequently but the fact that it happens at all seals the deal on whether or not I would feel safe using this method for anything other than a proof of concept or demonstration site.</li>
</ol>
<p>I&#8217;m sure the problems with CSS3 Pie are purely related to having to work around the huge amount of shortcomings within the IE browser and I applaud the author for getting it this far.  For now, though, I would still recommend against using this for any type of production work.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Use CSS3 PIE for enabling CSS3 in IE</title>
		<link>https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/</link>
					<comments>https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/#comments</comments>
		
		<dc:creator><![CDATA[Gabe]]></dc:creator>
		<pubDate>Sat, 12 Feb 2011 14:44:45 +0000</pubDate>
				<category><![CDATA[Browser Quirks]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[IE]]></category>
		<guid isPermaLink="false">https://www.hereswhatidid.com/?p=191</guid>

					<description><![CDATA[I recently ran across this Internet Explorer CSS3 workaround that uses a HTC file to solve the majority of my CSS3 woes when it comes to developing cross-browser layouts.  Rounded corners, drop shadows, gradients, rgba, multiple backgrounds and even PNG transparency support are all solved with a simple (mostly simple) bit of CSS and the [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>I recently ran across this Internet Explorer CSS3 workaround that uses a HTC file to solve the majority of my CSS3 woes when it comes to developing cross-browser layouts.  Rounded corners, drop shadows, gradients, rgba, multiple backgrounds and even PNG transparency support are all solved with a simple (mostly simple) bit of CSS and the HTC file they&#8217;ve developed.<span id="more-191"></span>The official site for this fix is here:</p>
<p><a href="http://css3pie.com/" target="_blank">http://css3pie.com/</a>/</p>
<p>I&#8217;ve set up a working demo of the code described below here:</p>
<p><a href="/coding/csspie/csspie.html" target="_blank">View Demo</a></p>
<p><a href="/codind/csspie/csspie-tabs.zip">Download Source Files</a></p>
<p>I tried this out on a new project that involved creating a tab-style content box with rounded corners.  Normally this would involve either using image sprites or living with the fact that IE-based browsers will not be able to render the corners as the designer wanted them.</p>
<p>Here&#8217;s a screenshot of the basic tabbed content boxes as they are rendered in Internet Explorer 6 and Internet Explorer 7/8.  I lumped 7 and 8 together since they were nearly identical except for some very minor font anti-aliasing differences.</p>
<h3>Before CSS3 PIE</h3>
<h3>Internet Explorer 6</h3>
<p><img class="alignnone size-full wp-image-198" title="IE 6 Before CSS3 PIE" src="https://www.hereswhatidid.com/wp-content/uploads/2011/02/css-pie-ie6-before.png" alt="IE 6 Before CSS3 PIE" width="520" height="389" /></p>
<h3>Internet Explorer 7 &amp; 8</h3>
<p><img class="alignnone size-full wp-image-200" title="IE 7 &amp; 8 Before CSS3 PIE" src="https://www.hereswhatidid.com/wp-content/uploads/2011/02/css-pie-ie78-before.png" alt="IE 7 &amp; 8 Before CSS3 PIE" width="520" height="389" /></p>
<h3>After CSS3 PIE</h3>
<h3>Internet Explorer 6</h3>
<p><img class="alignnone size-full wp-image-197" title="IE 6 After CSS3 PIE" src="https://www.hereswhatidid.com/wp-content/uploads/2011/02/css-pie-ie6-after.png" alt="IE 6 After CSS3 PIE" width="580" height="430" /></p>
<h3>Internet Explorer 7 &amp; 8</h3>
<p><img class="alignnone size-full wp-image-199" title="IE 7 &amp; 8 After CSS3 PIE" src="https://www.hereswhatidid.com/wp-content/uploads/2011/02/css-pie-ie78-after.png" alt="IE 7 &amp; 8 After CSS3 PIE" width="580" height="430" /></p>
<h3>Implementation</h3>
<p>There are a few things to watch out for when using CSS3 PIE.  A few of the CSS3 properties have to be done using the &#8220;-pie&#8221; prefix in order to trigger the proper rendering in Internet Explorer.  For example, to achieve this same multiple background declaration in CSS3 PIE:</p>
<pre class="prettyprint linenums">
background-color: #ccc;
background-image: url(quote-open.png), url(quote-close.png);
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;
background-color: #ccc;	background-image: url(quote-open.png), url(quote-close.png);  background-position: left top, right bottom;  background-repeat: no-repeat, no-repeat;
</pre>
<p>You will need to add the CSS3 PIE specific declaration for backgrounds:</p>
<pre class="prettyprint linenums">
-pie-background: #ccc url(quote-open.png) no-repeat left top, url(quote-close.png) no-repeat right bottom;
</pre>
<p>Also, when you&#8217;re using JavaScript to manipulate styles on your page you need to add the following bit to your CSS to tell CSS3 PIE to &#8220;listen&#8221; to that element and watch for updates to it&#8217;s ancestors.</p>
<pre class="prettyprint linenums">
-pie-watch-ancestors: 1;
</pre>
<p>Finally, the last semi-tricky thing with CSS3 PIE is that for some elements you will have to apply the following CSS to their ancestor to get the CSS3 PIE to take effect.  The symptom of needing to apply this fix is if the element you&#8217;re expecting to be styled disappears from the screen upon rendering:</p>
<pre class="prettyprint linenums">
position: relative;
z-index: 1;
</pre>
<p>All in all, I&#8217;ve found this system well worth the 2-3 minor tricky parts.  In my opinion it&#8217;s a much better solution than letting the unsupported CSS3 elements degrade for those that are still using Internet Explorer 6-8.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.hereswhatidid.com/2011/02/use-css3-pie-for-enabling-css3-in-ie/feed/</wfw:commentRss>
			<slash:comments>3</slash:comments>
		
		
			</item>
	</channel>
</rss>
