Tip for IE6 fixes in Dreamweaver

If you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

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

Then, when you look at a file index.php one directory up, it looks like this:

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

Or, in a file /misc/news/index.php, it looks like this:

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

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

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

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.