JavaScript Stylesheet Switcher

Tutorial for using alternate stylesheets on the same site. Useful for when you need to revert to different stylesheets to increase text size for compatibility or to swap colours at the click of a button:

http://www.alistapart.com/stories/alternate/

The tutorial goes through the JavaScript code to insert into the head tags, the HTML code to switch the stylesheets and also the external .js file you will need to download which includes the cookie (so that the change works sitewide when you navigate away from the page you were currently on).

Installing Multiple Versions of IE

Great install for downloading standalone versions of Internet Explorer:

http://tredosoft.com/Multiple_IE

Versions included (select/deselect which versions you want/don't want) with install):

v3.0
v4.01
v5.01
v5.5
v6.0

New Link Added

A useful link for any CSS problems.

The CSS Crib Sheet:
"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."

http://www.mezzoblue.com/css/cribsheet

Using CSS with Internet Explorer

We've all been there. Firefox loves it, Opera can't get enough of it, even Safari seems keen on it, but Internet Explorer doesn't want to know.

Here are some useful tips/hacks on how to write CSS rules so that only Internet Explorer can read them (and other browsers will ignore)

Conditional Comments
A conditional comment can be added to the head of your page that only IE will read. It should be put into the HTML like this:

{!--[if condition]}
(HTML to use if condition is true)
{![endif]--}

To use this in a working example it could look like the following:

{!--[if IE 5]}
{p}This message is only displayed in IE5.{/p}
{![endif]--}

In all examples replace } with > and { with < for the HTML to work.

Hacks
You can also write hacks into your stylesheet that only IE will read by using *html. A working example would be

* html body {
write your changes in here;
}

It can also work with id (#) and class (.) selectors by the following:

* html #idSelector {
write your changes in here;
}

* html .classSelector {
write your changes in here;
}

So although Microsoft may think they've got us by the short and curlys, there's plenty out there to get round them!

CSS Drop Down Menu

An awesome tutorial on how to design a CSS drown down/flyout menu for both horizontal and vertical menus.

This works in all major browsers (yes even IE6!) using an external .htc file to create the drop downs/flyouts. IE6 hacks are added so that the poor little browser can cope with the big bad mean CSS!

http://www.tanfa.co.uk/css/examples/menu/

Give it a try.....

Welcome to the blog!

Right - ever spent hours designing a website and trying to find the all important answer the question thats been bugging you all night.

This blog brings together all those resources, tip and techniques into one place.... here!

Have a look around and see if there is anything useful. Feel free to add your own posts and comments.