Archive for the ‘Technical’ Category

A quick tip on enabling broken image placeholders in Firefox 3 and beyond

Tuesday, August 11th, 2009

If you’re a keen web-developer and tend to do a lot of testing in Firefox, you will have probably come across the problem of  not noticing broken images, as Firefox will not render anything if the image cannot be found.

The one thing I certainly miss from Internet Explorer since migrating to Firefox was the broken image placeholder, or the big red cross. The only reason I personally still use Internet Explorer is purely for testing purposes, to ensure the Doxmart experience is just as good and usable in every common web browser.

To enable this feature in Firefox, the most commonly suggested method seems to be to visit ‘about:config’ in Firefox, and ensure that ‘browser.display.show_image_placeholders’ is set to ‘true’, but in my case this was already enabled and still not showing placeholders.

In order to get these working in my particular environment (Windows Server 2008, Firefox 3.5), i had to navigate to ‘%appdata%\Mozilla\Firefox\Profiles\<username>\chrome’, or, if you’re on a domain, it may be found in ‘%appdata%\Roaming\Mozilla\Firefox\Profiles\<username>\chrome’. In this directory, you should find a file entitled ‘UserContent-example.css’. Rename this file to ‘UserContent.css’ and add the following CSS rule:

/*
 * Show image placeholders
 */
@-moz-document url-prefix(http), url-prefix(file) {
  img:-moz-broken{
    -moz-force-broken-image-icon:1;
    width:24px;
    height:24px;
  }
}

Save this file, and restart Firefox. Any broken images should now show a broken image placeholder, which will enable you to easily identify missing or broken images during development.

There are also several other tweaks for Firefox that can be implemented using CSS, see this article from Mozilla for more information: Customizing Mozilla

%appdata%\Mozilla\Firefox\Profiles\profilename\chrome
  • Share/Bookmark

Tags: , , , ,
Posted in Technical, articles | 5 Comments »

Implementing a favourite icon (favicon) in ASP.NET

Wednesday, April 22nd, 2009

When the thought of adding a favicon, or rather, a favourite icon to your website appears on your todo list, you instantly think it’s a quick, easy 5 minute job. In most scenario’s, it is, however adding a favicon to an asp.net website can be a whole different kettle of fish.

Sure, the principles are the same, you add a basic tag to the header of your page, usually within a master template, and you make sure you have a nice looking 16×16 favicon.ico file located in your web root. Depending on your site configuration though, you might be about to embark on an absolute nightmare of a journey. That is, of course, unless you are reading this handy tip.

If you add the HTML for a favicon and start to test in your favourite web browser (assuming that’s not Internet Explorer 7…), you’ll notice the favicon (should) work flawlessly, and hopefully looks pretty nice too. But, you may find, when you check your favicon in Internet Explorer 7, you’re presented with the default, boring IE icon in your address bar, and no favicon!

After a few hours of Googling and scratching your head, making several tweaks to your code, tweaking your icon, a broken ‘F5′ key, and wondering what the problem is, you’ll probably begin to think it’s just Internet Explorer being funny and deciding not to play nice. In a way, thats true, but there is a way to resolve it.

Your ASP.NET website should have a ‘web.config’ file in your web root, containing various different configuration entries. One particular entry is:

<staticContent>
            <clientCache cacheControlMode="" />
</staticContent>

If ‘cacheControlMode’ is set to ‘DisableCache’, then this could very well be the reason that your favicon does not display correctly in Internet Explorer 7. In our case, this setting was preventing IE7 from placing our favicon into its own cache, and thus did not show correctly.

As a workaround, we have used the following three lines of code to allow IE7 to cache content (and the favicon):


<staticContent>
            <clientCache cacheControlMode="NoControl" />
</staticContent>

The end result is a perfectly working favicon in Internet Explorer 7, and all other major browsers.

Unfortunately there does not seem to be much documentation on this from our time spent Googling the issue, so we hope this is of some use to any other web developers experiencing the same issue as us.

  • Share/Bookmark

Tags: , , , , , , ,
Posted in Technical | 2 Comments »