Archive for the ‘DOM’ Category

Underscore (_) rendering issues with Cascading Style Sheets (CSS) in Internet Explorer (IE), Firefox, and other browsers

January 7th, 2007

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.


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:

background-color: red;
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.

Author: Adam Kahtava Categories: .NET, ASP.NET, CSS, DOM, Firefox, IE Tags:

Now supporting Opera 9 and other Web Development (CSS) Related Notes

December 9th, 2006

I noticed that a couple visitors were using the Opera web browser, so I decided to check my site with this highly W3C CSS compliant browser – see the “Acid2 Test”.

To my horror, I found my CSS wasn’t working properly.

My blog in Opera (the CSS rendering issue):

I began debugging my site by starting up Firefox with the Firebug extension. Upon inspecting my Document Object Model (DOM) and my rendered CSS I found a syntax error (a bug).

Using the Firebug extension for Firefox to view the DOM and related errors:

My error; I had erroneously entered */ instead of /* for my CSS comment. After making the changes everything rendered as expected in Opera.

Conclusion; My site now works with Opera 9. As a rule of thumb, I generally do my CSS design in a more W3C CSS compliant browser like Firefox, Opera, etc… and then make the respective changes for proper display in IE. Firebug is amazing, the best web development tool I have seen in a long time. Firebug really makes debugging a breeze.

Other useful Firefox extensions:

  • Colorzilla – Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  • – Keep, share and discover all your favorite things.
  • FasterFox – Performance and network tweaks for Firefox.
  • FireBug – Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • Greasemonkey – Customize the way webpages look and function (hide search engine advertisements, tweak Gmail).
  • Mouse Gestures – Allows you to execute common commands (like page forward/backward, close tab, new tab) by mouse gestures drawn over the current webpage, without reaching for the toolbar or the keyboard.

Other useful Internet Explorer extensions / toolbars:

Author: Adam Kahtava Categories: CSS, DOM, Firebug, Firefox, Opera Tags: