How to create a template that will show only in IE6 using javascript?

Question

Well the question is self explanatory! but the thing is I have no experience with javascript at all, but it seems to me that it's simple to do just that!

oh and the changes will be only into the css side nothilg will change into the html, by the way this is a CMS template (joomla) so the index is dot-php wich should make it easy... I think!

the idea is to show a diferent set of images for ie6 (none actually), and I'll ask people to update to a new browser using another JS that I already have! and showing a picture of how the template looks like on FF and new versions of IE (7,8)

oh, I intent to learn PHP and javascript but first I have to master CSS, it would be easy without IE6, but in this particular case the template depends on png so, that is not way I'll be able to make this work even with the IE7 project and all!

Answer 1

You have to use IE specific conditional comments. Example:

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

You need to put this in the head element of your html. This will target only IE6 browser. You can read more about this at Quirksmode: http://www.quirksmode.org/css/condcom.html

Note that you can use this method to include anything you want not just stylesheets. You could for example put a different javascript file there.

Answer 2

The best approach here is to make use of conditional comments to add extra CSS for users with IE6:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Answer 3

With regards to PNG, you could use Fireworks to export PNG with alpha transparency or use pngfix. That would sort PNG for ie6.

And as Darko Z said above. Best way is to stick all instructions on a css dedicated to ie6 and use conditional comments.