HTML And CSS

Internet Explorer has conditional commenting which allows you to put HTML into your web pages which show/not show depending on the version of Internet Explorer. This post looks at how to do this for selecting different or additional style sheets to load depending on the version of Internet Explorer used.

Rationale

Internet Explorer has a poor record of making formatting look the same across browser versions. Whereas a CSS layout will generally look the same across various versions of Mozilla Firefox, Safari or Opera, there can be major differences between the way a page renders across various versions of Internet Explorer. There are various ways of making things render in a CSS style sheet using different selectors, but sometimes it can just be easier to drop the e.g. Internet Explorer 6 “hacks” into a separate CSS file and conditionally load that after the main style sheet if the browser version is Internet Explorer 6.

Conditional Comments

Conditional comments in Internet Explorer look this example, where the code between the conditional tags will only show in Internet Explorer 6. It will not show in any other browser.

<!--[if IE 6]>this will only show in IE6<![endif]-->

There are a variety of other methods of showing/not showing content based on the version of Internet Explorer but they are beyond the scope of this post. javascriptkit.com has a good overview of IE conditional comments and Position is Everything has a table of IE version numbers (if you scroll down the linked page a bit) which is useful for working out what you need to enter to get it working correctly.

Conditional Comments for CSS selection

A main style sheet containing all the base settings should be loaded first (called main.css in the examples below) followed by the appropriate version by browser. You can either load a separate additional style sheet for each browser, or have one that’s loaded for e.g. less than IE7, less than IE6, less than IE 5.5 etc. Using this latter idea, IE 5.5 would therefore load the main stylesheet, the less than IE7 one and the less then IE6 one. If and when I do use this method, I prefer to have a main stylesheet, then one for IE 6, one for IE 5.5 and then one for less than IE 5.5. This is shown in the example below.

<link rel="stylesheet" type="text/css" href="/css/main.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->

Let’s look at each line from the above individually.

The first line loads the main.css file. This is common for all browsers.

<link rel="stylesheet" type="text/css" href="/css/main.css" />

The second line loads a CSS file called ie60.css if the browser version is IE 6.0. This is indicated by the comment [if IE 6]. No other browser will load this file because to non-IE browsers it just looks like a regular HTML comment. IE browsers know it’s a conditional comment but will ignore it if they are not IE 6.

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->

The third line does the same as the above but for IE 5.5. Note that you need to make the version string IE 5.5000 (that’s 3 zeroes at the end) to work.

<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->

The final line says that all Internet Explorer versions that are less than IE 5.5000 should load the ie50.css style sheet.

<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->

Summary

So that’s all there is to it. You can change the stylesheets loaded by version as you see fit. For example you may only need to make adjustments for one particular version of Internet Explorer and not the others. Sometimes this approach may be overkill but if you find you are putting a lot of special selectors into a stylesheet to make things render correctly in various browser versions using this approach may simplify things somewhat.

One of the issues with a fully liquid layout on a web page is the banner image is usually fixed in size and when you resize the window bigger there’s always going to be some space around the image that you need to deal with. This post looks at how to stretch an image using CSS creating a stretchyimage header banner on a web page.

Last week I looked at how to do a stretchy image header banner with CSS so that as you resize the browser window the header image remains the full width of the window and the height changes. One of the issues with this method is the image can get quite tall and lose quality as the browser window gets wider. This post looks at how to instead have a really wide background image only showing what the browser window can fit. The rest disappears into the ether.

I normally stay away from using images for navigation but when I do it’s useful to use CSS image sprites so a single image can be downloaded for the navigation. This saves time and bandwidth and means there’s no chance of lag of the mouseover image between mousing over and the image being grabbed from the server, or having to bother about pre-loading images.

I am always forgetting how to make a font italic with CSS so this very brief post shows how to do it.

The CSS !important declaration is something I’ve seen in CSS code before but never knew what it meant until a few days ago, so I thought I’d write a post looking at !important to show what it does.