Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)
- Microsoft is slowly moving towards compliance. The fact that they are not doing so quickly presents an unnecessary challenge to content creators and CSS authors because previously created hacks will not work, and new bugs may arise from the changes that are being made in the new version of the widely used browser that is not standards compliant.
-
- In the past, we have all user the * html, or _ or # and other techniques to serve specific Cascading Stylesheet (CSS) information to Microsoft Browsers to cater for their proprietary implementation CSS units and the box model. Some of the popular methods of isolating IE when styling and doing page layout will not work as some sections of the Microsoft implementation of CSS become Standards Compliant. In a particular case at hand, I discovered that IE 7.0 does not interpret form field heights and padding in the same way as IE 6 in CSS and thus using the # hack to send a different dimensions/units to IE and Firefox leaves either IE6 or IE7 badly aligned.
-
- In this case, I found out that much as both IE6 and IE7 still work with the # hack that prefixes settings, IE7 ignores the underscore '_' hack. This makes it possible to create separate settings for Firefox, IE 6 and IE 7 as shown in the below example:
- The first setting will apply to all browsers,
- The second setting will only apply to Microsoft Internet Explorer browsers
- The third setting will only apply to IE browsers 6.0 and older
-
- NB: In the case at hand, Internet Explorer version 7.0 beta 2 (7.0.5296.0) respected the same layout model as Firefox and other browsers, and so there was no need to have a distinct setting in the second stem to further isolate it from Firefox.
-
.context_bar_form_field
{
height: 15px;
#height: 15px;
_height: 21px;
}
Comments
This works great for me
Please be more specific in your CSS hack question
Conditional CSS stylesheets for Internet Explorer
The above-described hacks works well for situations where one or just a few lines of CSS code are required to be different for Internet Explorer browsers.
If you want to create entire CSS stylesheets and limit them to Internet Explorer, the following code is useful in either defining CSS code for IE only, or even importing external CSS files to be used only when the browser is Internet Explorer using @import.
<!--[if gt IE 5]>
<style type="text/css" media="screen">
.idonnyCSS{font-size: 1.3em }
/*The above CSS definitions will only be applies to IE versions greater than 5*/
</style>
<![endif]-->
Please note that the same rules for using @import apply here as in CSS in general. The @import commands must always come before any individual definitions between the <style> tags/elements.
CSS hacks for IE5, 6, 7 that validate as clean CSS