If you’ve tried to use rounded corners on the ASP.NET 2.0 menu control you’ll notice that the control renders a white background behind the entire bounds of the drop down menus (in IE 6). There is no user interface in Visual Studio (or Visual Web Developer) to get rid of this white space.

Here’s an example of the problem.

It turns out the white background behind the drop down menu is created by an iframe that is dynamically generated with javascript (around line 905 of the WebResource.axd for this control). OK, so you may ask, why don’t we simply change the background color of the body tag in the iframe or make it transparent? I’m no javascript whiz but I thought we could change the WebResource.axd around line 905 from “childFrame.allowTransparency = “true”;” to childFrame.style.background= “transparent !important”; but this did not work.

So what’s the quick “designer” fix? Use an IE-specific CSS “chroma” filter to drop this white background out. NOTE: Only IE 6 will use CSS rules whose selectors start with an underscore “_”.

{
_filter:progid:DXImageTransform.Microsoft.Chroma(Color='#FFFFFF');
}

This chroma filter drops out the white background only in IE. Firefox and other browsers are OK since they don’t render the white to begin with. The anti aliasing is not world class, but it is a lot better than the buggy looking white!