Anyone who has spent much time working with Cascading Style Sheets (CSS) has discovered that each browser has slightly different support for the various CSS versions. To further complicate CSS usage, each browser has a different set of bugs and/or understanding of what a particular standard requires. Internet Explorer is definitely the worst offender and the furthest from fully and faithfully supporting CSS 2.1. While support has been steadily improving between versions, it is still not on par with other modern browsers.
Typically, designers use a number of different hacks to target CSS at specific browsers in order to work around the inconsistencies. The process generally starts with a skin design which renders correctly in Firefox and then the designer adds hacks to get it to work in IE. To make matters worse, Microsoft has made changes in each subsequent version of IE such that a hack that worked in IE5.5 will not necessarily work in IE7.
The problem with using a hack is that it is not guaranteed to work with the next version of the browser. Clearly this is not a great solution. The solution that I have come to prefer is to use a separate stylesheet that specifically targets IE. Starting in Internet Explorer 5.0, Microsoft added the ability to use conditional comments to show or hide content. Conditional comments are currently ignored by every browser except IE on Windows. This means that you cannot use this technique to target Opera or Safari or any other browser.
Conditional comments use the following format:
<!--[if {some condition}]>
Special instructions for targeted IE version here
<![endif]-->
You can read more about implementing conditional comments on the following sites:
When working on the MinimalExtropy skin for DotNetNuke 4.9 we decided to use transparent PNG images for the design. Transparent PNGs provide full alpha transparency which allows for more flexibility in the graphic design of the site. You can easily layer gradients without unwanted artifacts. Using transparent GIFs don’t allow this level of control over the design. Unfortunately, Transparent PNGs are not supported in IE6 and IE5.5. Since a large portion of the DotNetNuke community still use these browsers we needed a way to make the new design still look acceptable.
I researched a number of different transparent png hacks but found that in every case there were limitations. All of the transparent PNG hacks relies on using JavaScript to swap out the PNG image and instead apply a transparency filter. The downside of this approach is that there are several bugs in IE that affect the filter and that require the use of very specific HTML or server configuration. For example, one of the most popular PNG fixes relies on the use of behaviors and an HTML component (HTC). This hack was supposed to work without requiring modifications to your markup. In practice, however, I found that it did not work as planned, mostly because of the known limitations (see bottom of page).
Given the unreliable nature of the PNG hack, I decided that the best solution was to use a stylesheet that was targeted at IE5.5 and 6. This stylesheet used GIFs instead of PNGs. I was forced to give up the drop shadow on the content area, but was otherwise able to keep the overall design, using exactly the same HTML.
The first version of the skin used the following conditional comment to include a custom stylesheet for IE5.5 and 6.
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="<%=skinpath%>ie6skin.css" />
<![endif]-->
This works great. However, there was one item which bugged me. The team has worked very hard in DNN 5.0 to make the default installation XHTML compliant. Given the current skinning engine, each skin only has control over the HTML within the body tag. In IE6 (and IE5.5) the stylesheet reference would be added to the body of the page. While this works, it is not compliant. Rather than take a step backward I created a simple skin object that will render the conditional comment and the stylesheet link in the head section of the page where it belongs.
<dnn:STYLES runat="server" ID="StylesIE6" Name="IE6Minus" StyleSheet="ie6skin.css" Condition="lt IE 7" UseSkinPath="true"/>
Ultimately, this is just a temporary solution. I believe the best solution is to define a standard mechanism within the skinning engine that allows skinners to provide stylesheets targeted at any browser – past, present or future. This would allow the designers to be in complete control of how the page renders for each browser. By defining a common root stylesheet and then overriding styles as needed for a specific browser, you can greatly decrease the complexity of the CSS and significantly reduce the development time.