Adam.Kahtava.com / AdamDotCom

The World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) 2 specifications introduced the underscore (_) as a valid CSS naming character, this allows CSS selectors like class selectors and ID selectors to be named like:

• ._menu_item_1
• #_menu_item_2
• .menu_item_3
• #menu_item_4

However; rendering inconsistencies remain among most popular browsers when Styles, Classes, or IDs are preceded by the underscore character.

Inconsistencies:

CSS Classes and IDs with an underscore immediately after their respective delimiter (‘.’ Or ‘#’) are rendered by both Firefox and Opera, but NOT by Internet Explorer.
This CSS example will NOT work in Internet Explorer, but WILL work in Firefox and Opera:

._idTest1{
background-color: red;
}
#_id_Test2{
background-color: red;

Style entries preceded by an underscore are rendered by Internet Explorer (IE 6 & 7), but NOT by Mozilla / Gecko (Firefox) or Opera.

This CSS example will only work in Internet Explorer:

*{
_color: green;
}

This is a documented quirk and bug, see The Underscore Hack and IE Underscore Bug Test for more information.

The Results of our Underscored CSS in Internet Explorer:

The Results of our Underscored CSS in FireFox (rendered the same in Opera):

This CSS quirk came up in an ASP.NET forum, where a poster was having cross browser issues with his menu controls. We discovered that <xhtmlConformance mode=”Legacy” /> was defined in his web.config file which caused the ASP.NET Master Page control (ctl00) to be preceded by an underscore (_ctl00) which was preventing the CSS from being rendered in IE.

Related links:
The IE Underscore Bug Test
The original forum thread: menu control in master page does not get styles in ie 6.0.
ScottGu’s Blog: Gotcha: Don’t use <xhtmlConformance mode=”Legacy”/> with ASP.NET AJAX
View the complete source code for my Underscore Test or try it on your favorite browser here.