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.
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.