Skip to the content

Error! Your browser is IE 6.0, released in 2001. It is not secure and lacks today's features.
Upgrade to a modern browser. You'll be a happier and safer surfer.

Client login for Goldman Design Close

Previous Post ASP.NET 2.0 Drop Down Menu Control – White Background Fix Next Post

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.

Example of the ASP.NET 2.0 Drop Down Menu Control using the CSS Chroma Filter for IE

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 “_”.

1
2
3
{
_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!

ASP.NET 2.0 Drop Down Menu Control with the CSS chroma filter applied

13 Comments

  1. Dirk says:

    Hey,

    Are you willing to provide me with the code for making such a menu with that lay-out using the menu control? I can’t seem to get anywhere near that good looking menu.

  2. Hi Dirk,

    The example above is an abstraction of the menu I created for http://www.wintellect.com. I probably shouldn’t give you the source files from Wintellect’s site : ).

    VS allows you to specifically some colors, some borders and even some images within the tool. But to use more advanced rounded corner techniques you’ll need to apply CSS class names to the nodes in VS then use an external CSS file to specify the background images that create the rounded corners.

    I know this is not the answer you were looking for but I hope it helps a little.

    – Kevin

  3. Dirk says:

    Hey Kevin,

    thank you for the quick reply.

    I will give it a try and let you know what made.

    – Dirk

  4. bhavana says:

    Hi

    I am having the same problem of whitepsace in my menu .I used the code pasted on your site but it did not resolve the issue.My menu is not getting created inside an iframe but in a div tag .It is also being created programmatically in the CS file.

    How do I solve this problem?Your help is highly appreciated.
    Thanks a lot

    Bhavana

  5. Bhavana, if you want to send a link I can take a look. FYI – you’ll never see the iFrame in your project, it is created as the page is rendered.

    Another FYI – : ) – ASP.net’s new CSS Adapters remove all these nested tables and iframes from drop down menus and can be *much* easier to style.

  6. jh says:

    Thank you for this information. I have a question though… I was trying to apply this for a different reason… I have 2 iFrames that I’m loading content into for a site. All browsers are fine, except for IE which flashes it’s default bg color #ffffff before loading in the content for the iFrame.

    Using your method above, it does remove the white “flash” I was getting in IE, but it also removes all other pixels that are #ffffff that get loaded into that iFrame from there on out. Is there a way to have it filter out the white background initially and then either turn off once the page has loaded? Or to tell it to only filter out the white background and ignore all other page elements?

    Thanks for your time!
    -J

  7. Hi J,

    I’m sure you can turn the filter on for say the first 1 or 2 seconds then turn it off with JavaScript. Unfortunately, I’m not a Javascript whiz. Here are some reference links that may help on the filter side of things. Sorry I can’t help more on this.

  8. jh says:

    Kevin,
    Thank you for your response! You have helped me solve an issue that I’ve been working on for a long time! I began digging around for some scripting and came up with the following which works great for this (removing the iFrame white flash in IE, just prior to the content loading into the iFrame .) First is applying the chroma filter as you documented above to remove the flash (by instructing IE to filter out pure white, it’s default bg color), the next step is to then disable the filter after a few seconds so that white elements that will then get loaded into the respective iFrame, won’t have the white pixels removed. Here is the javascript I used:


    // timer to disable chroma filter in IE iFrame

    Best Regards, and thank you for ending my frustrations with this!
    -J

  9. Thanks J for posting. Glad this helped. Below is the JS you used.

    [code]

    [/code]

  10. Metropolis12 says:

    DXImageTransform.Microsoft.chroma

    I am using this in IE .. does foxfire support this?

  11. Metropolis12 – No Firefox does not support any of the Microsoft filters as far as I know.

    In the ASP.net 2.0 rounded corner drop down menu issue I had above, Firefox did not render a white background, so there was no fix needed.

  12. Chris Bywaters says:

    I have to simply say thanks for this tid bit …

    I have been trying to figure out what was going on the ASP:MENU control for almost a day.

  13. monika says:

    hii kevin,

    I have made a website based on a masterpage with a menu control on it.
    The menu control “drops down” when a mouse hoovers over it.
    Drop down works fine, but the part of the menu which hover on the dropdown “hides” behind the dropdown list !!

    i have already set z-incdex but its not show any effect can u give me solution other than z-index

Leave a Comment