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:

.context_bar_form_field
{
height: 15px;
#height: 15px;
_height: 21px;
}
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.