<?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>Digital Ambulation &#187; css</title>
	<atom:link href="http://www.alanbriolat.co.uk/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.alanbriolat.co.uk</link>
	<description>Life, programming and general geekery</description>
	<lastBuildDate>Mon, 09 Jan 2012 12:07:50 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Spectacular IE7 CSS box model failure</title>
		<link>http://www.alanbriolat.co.uk/2009/05/spectacular-ie7-css-box-model-failure/</link>
		<comments>http://www.alanbriolat.co.uk/2009/05/spectacular-ie7-css-box-model-failure/#comments</comments>
		<pubDate>Sun, 17 May 2009 16:31:54 +0000</pubDate>
		<dc:creator>Alan</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[css]]></category>

		<guid isPermaLink="false">http://www.alanbriolat.co.uk/?p=353</guid>
		<description><![CDATA[When re-theming DokuWiki to fit in with the general look-and-feel of this blog, I thought it would look good to have buttons with images relevant to what they did. Having created the necessary, CSS, I subjected it to my multi-browser test bed (actually a Windows XP virtual machine with the latest versions of the top [...]]]></description>
			<content:encoded><![CDATA[<p>When re-theming DokuWiki to fit in with the general look-and-feel of this blog, I thought it would look good to have buttons with images relevant to what they did.  Having created the necessary, CSS, I subjected it to my <a href="http://iris.codescape.net/~alan/IE-rendering-fail-3.png">multi-browser test bed</a> (actually a Windows XP virtual machine with the latest versions of the top 5 browsers running in it).  The CSS I used was along the lines of this:</p>

<div class="wp_syntax"><div class="code"><pre class="css" style="font-family:monospace;">div<span style="color: #6666ff;">.dokuwiki</span> form<span style="color: #6666ff;">.btn_show</span> <span style="color: #6666ff;">.button</span> <span style="color: #00AA00;">&#123;</span>
  <span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span> <span style="color: #933;">1px</span> <span style="color: #cc66cc;">0</span> <span style="color: #933;">1px</span> <span style="color: #933;">16px</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">transparent</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">images/page.png</span><span style="color: #00AA00;">&#41;</span> <span style="color: #933;">0px</span> <span style="color: #933;">1px</span> <span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span>
  <span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></div></div>

<p>One thing that became apparent is that IE7 has absolutely no idea how to render this.  The correct rendering (as produced by Firefox 3 and all the other browsers) is this:</p>
<p style="text-align: center;"><a href="http://www.alanbriolat.co.uk/wp-content/uploads/2009/05/button-background-image-ff3.png"><img class="size-full wp-image-354 aligncenter" title="button-background-image-ff3" src="http://www.alanbriolat.co.uk/wp-content/uploads/2009/05/button-background-image-ff3.png" alt="button-background-image-ff3" width="243" height="31" /></a></p>
<p>IE7&#8242;s take on rendering this looked more like this:</p>
<p style="text-align: center;"><a href="http://www.alanbriolat.co.uk/wp-content/uploads/2009/05/button-background-image-ie7.png"><img class="size-full wp-image-355 aligncenter" title="button-background-image-ie7" src="http://www.alanbriolat.co.uk/wp-content/uploads/2009/05/button-background-image-ie7.png" alt="button-background-image-ie7" width="317" height="41" /></a></p>
<p>After a bit more experimentation, I came up with the following illustration which roughly shows what is happening:</p>
<p style="text-align: center;"><a href="http://iris.codescape.net/~alan/IE7-button-rendering.png"><img class="aligncenter" title="IE7 button rendering" src="http://iris.codescape.net/~alan/IE7-button-rendering.png" alt="" width="361" height="155" /></a></p>
<p>The nice thing is that this is fixed in the upcoming IE8, so I&#8217;ve taken the stress-free approach; since it&#8217;s a relatively &#8220;minor&#8221; visual bug, there&#8217;s no sense it tearing my hair out trying to make it render correctly everywhere.  On this occasion I&#8217;ve decided that people can either deal with the fact their browser is behind the times, or upgrade, or wait for the upgrade to happen for them.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.alanbriolat.co.uk/2009/05/spectacular-ie7-css-box-model-failure/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

