Home • About • Services • Projects • Blog • Profiles • Contact Us

Blog Entries

ckEditor and ASP.NetAugust 2nd, 2010
Custom Animations with JQueryJuly 25, 2009
Grant a User Read/Write Rights to Multiple Directories at OnceJune 22, 2009
Access ODBC error '80004005'May 15, 2009
Twitter for BusinessesApril 8, 2009
How to Supress the Information Pop-up in Google MapsMarch 13, 2009
How to Display Opacity in Internet Explorer 8January 24, 2009
Flash Video Not Playing in IIS 7December 19, 2008
ECS A780GM-A New BIOS UpdateNovember 15, 2008
Google AnalyticsOctober 13, 2008
DNN Events Module EditingSeptember 10, 2008
Ajax Toolkit NoBot ControlAugust 19, 2008
asp:Calendar Title Border IssueJune 23, 2008
IE 6 Disappearing Header IssueMay 15, 2008
ECS A780GM-A Motherboard IssuesApril 15, 2008
CSS Friendly Menu Adapter Common IE6 IssuesMarch 3, 2008
Adobe CS3 is not compatible with Windows XP x64June 13, 2007
Guide to Flash on the webMay 14, 2007
Monday, March 03, 2008

CSS Friendly Menu Adapter Common IE6 Issues

The ASP.Net 2.0 CSS Friendly Menu Adapter is a powerful and handy tool for creating consistent, cross-browser, standards based code. It also cleans up the markup and presents lighter, more readable XHTML. The problem comes from designing websites that are backwards-compatible with Internet Explorer 6.

Internet Explorer 6 has several quirks, but it is particularly sensitive to drop down menus created with lists. It is also very difficult at times to track down the exact line of code to make the menu render properly. The following examples are the issues and resolutions that I came across in developing several of these menus.

JavaScript

When the menu adapter detects an IE6 browser, it uses javascript to display and hide the sub menus. There are two issues that you need to check if the sub or pop-out menus are not displaying.

  1. Make sure that the AdapterUtils.js and MenuAdapter.js files are included on your server and in the source of your webpage. If you keep the same directory structure as the project template, you should be fine. If not, you will need to change a line of code in both code files (MenuAdapter.cs and WebControlAdapterExtender.cs). The line that you need to change is folderPath = "directoryPath" where directoryPath is the path to your javascript files.
  2. Make sure that no other Javascript files are using the window.onload event. If another script in your webpage is using the onload event, it can overwrite the function call and cause the menu to fail. In that case, combine the Javascript files and call both functions from a startup function.

CSS

The project team that designed the CSS adapters did a good job of including most of the CSS necessarry for the menu to render correctly in IE6. In fact, most of the time I don't include the separate IE6 only style sheet. However, the use will depend on the project and you should try anything that works for you. The following are CSS rules that can help fix a malfunctioning menu.

  • Position:Relative This rule can help if the menu is hidden behind another layer or the sub menu is not appearing correctly.
  • Fixed Widths You will probably want to determine the size of the entire menu and its items. This will help it render properly.

Overall, the CSS Friendly Menu Adapter is a quick and easy conversion. It is definitely worth the effort if you can spare the time for tweaking the menu. If you continue experiencing problems with the menu, check the ASP.Net forum. Typically another user has experienced a similar problem and you can find an answer relatively quickly. Happy coding.

Links