<?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>the life of a web developer &#187; missing image</title>
	<atom:link href="http://gavtaylor.co.uk/blog/tag/missing-image/feed" rel="self" type="application/rss+xml" />
	<link>http://gavtaylor.co.uk/blog</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Wed, 11 Aug 2010 10:20:12 +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>Enable broken image placeholders in Firefox</title>
		<link>http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox</link>
		<comments>http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox#comments</comments>
		<pubDate>Thu, 11 Mar 2010 07:01:48 +0000</pubDate>
		<dc:creator>Gavin</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Tools of the Trade]]></category>
		<category><![CDATA[broken image]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Fx]]></category>
		<category><![CDATA[image placeholder]]></category>
		<category><![CDATA[missing image]]></category>
		<category><![CDATA[mozilla]]></category>

		<guid isPermaLink="false">http://gavtaylor.co.uk/blog/?p=334</guid>
		<description><![CDATA[Something that has always bugged me about Firefox is that if it encounters a broken image it doesn&#8217;t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page. For a while [...]]]></description>
			<content:encoded><![CDATA[<p>Something that has always bugged me about Firefox is that if it encounters a broken image it doesn&#8217;t display an image place-holder. Instead it displays the alt attribute as in-line text. This can cause problems if your primary development browser is Firefox, as you may not notice broken images on a page.</p>
<p>For a while there has been an option in the config to display image place-holders while a page loads but not for broken images as on IE (yes I&#8217;m praising an IE feature!).</p>
<p>Image placeholders on load is set to ON by default, your can change this if you want by going to <a href="about:config"><em>about:config</em></a> and searching for &#8216;image&#8217;. The option your looking for is:</p>
<p><code>browser.display.show_image_placeholders</code></p>
<p>Just double click to change the value.</p>
<p>As I said before, this doesn&#8217;t affect broken images after the page has loaded, and after several searches it looks like the option just isn&#8217;t available to Fx users as a general setting. There is however a solution&#8230;</p>
<p>Firefox allows users to specify custom CSS to be applied to websites on a global basis, e.g if you want your default link colour on unvisited links to be black instead of the default blue.</p>
<p>You do this by making changes to your global content css file. You can find it at the following location (OS Specific &#8211; I&#8217;m on windows 7) <em>‘%appdata%\Mozilla\Firefox\Profiles\\chrome’</em> (if your on a domain you will need to edit it in your roaming folder), look for a file called &#8216;UserContent-example.css&#8217; and rename it to &#8216;UserContent.css&#8217;, this will then be loaded by Firefox when it fires up.</p>
<p>Add the following CSS to the file and restart Firefox..<br />
<code>/* Enable image placeholders  */<br />
@-moz-document url-prefix(http), url-prefix(file) {<br />
img:-moz-broken{<br />
-moz-force-broken-image-icon:1;<br />
width:24px;<br />
height:24px;<br />
}<br />
}</code></p>
<p>Thats it&#8230; when you next come accross a broken/missing image, you will get a box the size you have defined in its place with the alt inside it.</p>
]]></content:encoded>
			<wfw:commentRss>http://gavtaylor.co.uk/blog/enable-broken-image-placeholders-in-firefox/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
