<?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>Peter Törnstrand &#187; css</title>
	<atom:link href="http://www.tornstrand.com/category/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.tornstrand.com</link>
	<description>Drupal, PHP and web developing</description>
	<lastBuildDate>Fri, 16 Apr 2010 07:04:56 +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>Links on PNG backgrounds in IE6</title>
		<link>http://www.tornstrand.com/2008/01/20/links-on-png-backgrounds-in-ie6/</link>
		<comments>http://www.tornstrand.com/2008/01/20/links-on-png-backgrounds-in-ie6/#comments</comments>
		<pubDate>Sun, 20 Jan 2008 16:16:55 +0000</pubDate>
		<dc:creator>peter</dc:creator>
				<category><![CDATA[css]]></category>
		<category><![CDATA[ie6]]></category>

		<guid isPermaLink="false">http://www.tornstrand.com/2008/01/20/links-on-png-backgrounds-in-ie6/</guid>
		<description><![CDATA[Using transparent PNG background images is pretty standard these days with shadows and fading backgrounds on almost every site. PNG backgrounds even works with IE6 although it&#8217;s implementation is kind of buggy. In order to use it on IE6 you have to use the IE6 filter rule, as shown below. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background.png',sizingMethod='scale'); This isn&#8217;t a [...]]]></description>
			<content:encoded><![CDATA[<p>Using transparent PNG background images is pretty standard these days with shadows and fading backgrounds on almost every site. PNG backgrounds even works with IE6 although it&#8217;s implementation is kind of buggy. In order to use it on IE6 you have to use the IE6 filter rule, as shown below.<span id="more-5"></span></p>
<pre>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/background.png',sizingMethod='scale');</pre>
<p>This isn&#8217;t a problem for you can stick this piece of CSS code in a separate CSS file and use the IE conditional syntax to only make this code visible to IE6.</p>
<p>Ok, on to the problem then. If you want to use a PNG background image larger then 1 pixel in height and have a regular link on top of that background your in for some trouble. For some reason, if your background image is larger then 1 pixel in height, IE6 wont accept links on top of PNG backgrounds.</p>
<p>However, after much grief and searching the net I found a solution for the problem. It turns out that you can actually have links on top of PNG backgrounds if the background under the link is completly transparent. Look at the pictures below.</p>
<p><img src="http://www.tornstrand.com/wp-content/uploads/2008/01/ie6_png_background1.jpg" alt="IE6 PNG background and links image 1" /></p>
<p>This is how the page looks rendered in a browser.</p>
<p><img src="http://www.tornstrand.com/wp-content/uploads/2008/01/ie6_png_background2.jpg" alt="IE6 PNG background and links image 2" /></p>
<p>This is the PNG background image that allows me to use links on top of it. Notice how the area where the links are suppose to be is completly transparent.</p>
<p><img src="http://www.tornstrand.com/wp-content/uploads/2008/01/ie6_png_background3.jpg" alt="IE6 PNG background and links image 3" /></p>
<p><strike>If I&#8217;ve been using this image the links would not have worked on IE6.</strike><strike><br />
</strike></p>
<p><strong>Important update<br />
</strong>It seems you can actually use this kind of background images if you set the children of the container with the background image to <em>position: relative</em>. For example, say a UL tag had the above image set as it&#8217;s background image. If I then set the UL&#8217;s children, the LI&#8217;s, to <em>position: relative</em> any links they contain would be clickable in IE6.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.tornstrand.com/2008/01/20/links-on-png-backgrounds-in-ie6/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
