Category Archives: CSS

CSS, Tech Notes

Style testing on multiple browsers

Leave a comment

One of the trickest parts of web development is ensuring your code is backwards compatible, there are a variety of utilities that can be utilised in order to assist with this, below I’ve listed the most useful ones that I have found.

Internet Explorer Application Compatibility VPC Image

The most useful of these utilities is provided by Microsoft, realising that a lot of people were still using older versions of Internet Explorer they release Virtual PC (external link) images containing versions of Internet Explorer from version 6 onwards. The images expire after a few months but Microsoft are constantly updating them to include the latest Windows updates.

Download the Internet Explorer Application Compatibility VPC Images (external link) from Microsoft’s site.

BrowserShots Logo 

Browsershots (external link) is a open source web farm running multiple versions of operating system and browsers which can be used to check rendering of a single web page. As it is free it can sometimes fail to render your page on certain selections and can also take a long time to render but it is very helpful to see what it will look like on more obscure operating system and browser combinations.

Litmus Logo 

Litmus (external link) is a website that offers paid for and free versions to show you how your web pages and emails render in various browsers and/or email readers. It is more reliable than Browsershots but the free version’s list of browsers is limited.

CSS, Tech Notes

Add an Internet Explorer specific stylesheet

Leave a comment

You can add a Internet Explorer (external link) specific stylesheet to your WordPress (external link) theme using the following code:

<!--[if lt IE 6]>
   <link type="text/css" href="<?php bloginfo('template_url'); ?>/ie6.css" media="screen" rel="stylesheet" />
<![endif]-->

This will link to a Internet Explorer 6 only stylesheet using conditional comments, the ie6.css file should be located in the same place as the standard css file.

CSS, Tech Notes

Firefox and pre font-size

Leave a comment

My website stylesheet sets the overall font size to be 76.1%, this was working fine except for Firefox and the pre tag, it would render fine in Internet Explorer but Firefox would shrink the font size down. In order to get around this I used the following CSS:

pre, code {
   font-size:  123.9%;
   *font-size: 100.0%;
}

The asterisk in front of the font-size command means it is strictly invalid CSS which is ignored by Firefox but is still parsed by Internet Explorer.