the life of a web developer » CSS

What happened to the design?

Gavin — Thu, 08 Apr 2010 13:12:53 +0000

Today, one or two of you may notice the site looks a little different. That’s because the style sheets for both my site and the blog have been removed for one international day (that’s about 48 hours to you and me) to celebrate CSS Naked Day.

Every year, website developers across the world remove their style-sheets and show off their to help promote web standards. Its a great opportunity to double check and show people that your website is written for and accessible to all.

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

Enable broken image placeholders in Firefox

Gavin — Thu, 11 Mar 2010 07:01:48 +0000

Something that has always bugged me about Firefox is that if it encounters a broken image it doesn’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 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’m praising an IE feature!).

Image placeholders on load is set to ON by default, your can change this if you want by going to about:config and searching for ‘image’. The option your looking for is:

browser.display.show_image_placeholders

Just double click to change the value.

As I said before, this doesn’t affect broken images after the page has loaded, and after several searches it looks like the option just isn’t available to Fx users as a general setting. There is however a solution…

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.

You do this by making changes to your global content css file. You can find it at the following location (OS Specific – I’m on windows 7) ‘%appdata%\Mozilla\Firefox\Profiles\\chrome’ (if your on a domain you will need to edit it in your roaming folder), look for a file called ‘UserContent-example.css’ and rename it to ‘UserContent.css’, this will then be loaded by Firefox when it fires up.

Add the following CSS to the file and restart Firefox..
/* Enable image placeholders */ @-moz-document url-prefix(http), url-prefix(file) { img:-moz-broken{ -moz-force-broken-image-icon:1; width:24px; height:24px; } }

Thats it… 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.

An Early Look At Internet Explorer 9

Gavin — Wed, 18 Nov 2009 21:19:09 +0000

The Microsoft Internet Explorer Development team has made a post on their blog about the next instalment of the Internet Explorer Saga (rumoured to be the last Redmond based browser to bear the name Internet Explorer). Unfortunately there is no alpha build available with this post for us to play with, just the usual spiel telling us about how good IE9 is will be might be, and how it compares to the “latest” (as of 18/11/09) builds of other more popular browsers.

Full of “how are javascript engine is better than your javascript engine” talk, there isn’t much about the features it will include, or a reason why they dont just release a version 8.* will all these updates rather than just going for version 9, but it does highlight their focus on improving CSS support (including rounded corners), its defiantly worth a quick read and also a bookmark for those of you not already subscribed to the RSS feed.

You can find the post on the IE Developer Blog