How to Use Conditional Comments to Create Browser-Specific CSS Styles in Dreamweaver

Conditional Comment Code

<!-- BEGIN CONDITIONAL STYLES -->

<!-- Dreamweaver will not automatically update these stylesheet links! Use absolute file paths. -->
<!--[if IE 6]>
<link rel="stylesheet" href="http://YOURURL/css/browser-specific/ie6.css" type="text/css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="http://YOURURL/css/browser-specific/ie7.css" type="text/css" />
<![endif]-->

<!-- END CONDITIONAL STYLES -->

Using Conditional Comments

  1. Decide which browsers to target. This will depend on who your users are and what browsers they are using. Depending on where your website is hosted, you may be able to get user statistics for your site. Alternately, various sites, such as W3Schools, offer summaries which can be used as a starting point.
  2. Create CSS stylesheets to hold your browser-specific styles. Create one stylesheet for each version you intend to target. Keeping these stylesheets in a separate folder will reduce clutter and make it clearer to anyone else who maintains the site how it is structured.
  3. Add conditional comments containing links to the CSS stylesheets you just created to your Dreamweaver template.
    • Position the conditional comments after rules declared in the document and links to non-browser specific stylesheets. Later rules override earlier rules, and your browser-specific stylesheets will need to override your non-browser specific styles, so it is important that they come last.
    • Set off your conditional comments with HTML comments, and make sure they are the same for every document in the site. This will make using a file search utility (such as Dreamweaver's Find and Replace function) to find and replace conditional comments easier, which will in turn make your documents easier to maintain.
    • File paths contained in conditional comments will not automatically update in Dreamweaver! Using absolute paths rather than relative paths (i.e. "http://mysite.com/css/browser-specific/ie6.css" rather than "css/browser-specific/ie6.css") will allow you use the same conditional comments in all of your documents instead of having to update your conditional comments individually based on where your document is in the file structure.
      • labeled code

      An example of conditional comment use.

  4. Add styles to the browser-specific stylesheets you just created. Your browser-specific stylesheets should contain only the styles that need to be displayed differently in various browsers. Remember, you are not creating separate styles for each browser, you are only fixing a few isolated issues. If you are having to do more than that, you should probably consider trying a different coding strategy.
    CSS rules for IE 7

    This is the entire stylesheet for IE 7. Note how short it is.

  5. Add comments to your non-browser specific stylesheets noting which styles will be affected by your browser-specific stylesheets. This will make for easier code maintenance.
  6. Upload your updated stylesheets and test your new styles. If you do not see the changes you were expecting to see:
    • Add a rule to your conditional style sheet which does something really eye-catching, like turning all of your paragraphs fuchsia (p{color: #FF00FF;}). Upload the stylesheet and see if you have fuchsia text. If you don't, then there is an error in your conditional comment, most likely in your file path. Find the error, fix it, and try again.
    • If your paragraphs are fuchsia, but you are still not seeing the changes asked for in your other rules, try using the "!important" tag. The "important!" tag should be positioned just before the semicolon in your declaration: div.example{padding: 20% !important;}