Using IE conditional comments
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO
In this tutorial, you'll learn how to use Internet Explorer conditional comments to target this browser.
Tweaking a stylesheet is often a question of isolating some browser feature with different (hacking) techniques. Since the release of Internet Explorer 7, after a wait that lasted many years, some of the old school hacks no longer works since IE7 adheres more closely to the CSS standard.
It is strongly suggested you develop your web site while testing it with the Firefox browser, then check if Internet Explorer renders it correctly. If there is anything wrong with the Internet Explorer rendering, used the technique described in this topic to fix the issue.
Targeting the Internet Explorer browser
To target the Internet Explorer browser, you can use conditional comments, a feature of the Internet Explorer browser. All the templates that ship with Tópico contain the following conditional comments.
<body> <xsl:comment><![CDATA[[if IE]><div id="ie"><![endif]]]></xsl:comment> ... <xsl:comment><![CDATA[[if IE]></div><![endif]]]></xsl:comment> </body>
Since all HTML output contains these comments, it is then possible to use the following CSS selector to target the Internet Explorer browser.
div.mydivclass {margin-left:6px;}
div#ie div.mydivclass {margin-left:4px;}
In the above stylesheet, the first line, which targets all browsers, sets the left margin to 6 pixels while the second line sets the same margin to 4 pixels in any Internet Explorer browsers.
Targeting a specific version of Internet Explorer
To target a specific version of the Internet Explorer browser, the technique is the same but the conditional comment is a little different. The following content will be inserted only in version 6 of Internet Explorer.
<body> <xsl:comment><![CDATA[[if IE6]><div id="ie6"><![endif]]]></xsl:comment> ... <xsl:comment><![CDATA[[if IE6]></div><![endif]]]></xsl:comment> </body>
None of the default templates contain comments that are targeting specific version of Internet Explorer.
The following CSS selectors target version 6 of Internet Explorer.
div.mydivclass {margin-left:6px;}
div#ie div.mydivclass {margin-left:4px;}
In the above stylesheet, the first line, which targets all browsers, sets the left margin to 6 pixels while the second line sets the same margin to 4 pixels in version 6 of the Internet Explorer browser.
THIS TOPIC IS A WORK IN PROGRESS
THESE PAGES ARE STILL UNDER CONSTRUCTION AND DO NOT NECESSARELY REFLECT THE CURRENT VERSION OF TÓPICO