Home arrow Style Sheets arrow Fixing Browser Incompatibilities in a CSS Drop-Down Menu
STYLE SHEETS

Fixing Browser Incompatibilities in a CSS Drop-Down Menu


Drop-down menus have long been an important part of numerous web-based user interfaces. Since they have been around so long, we've seen many different approaches to building them, from pure JavaScript-driven menus, Flash-based ones, and simple, well-structured (X)HTML markup. This three-article series shows you how to build a drop-down menu using only clean and tight structural markup, along with a few simple CSS styles and a bit of JavaScript code.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 22, 2008
TABLE OF CONTENTS:
  1. · Fixing Browser Incompatibilities in a CSS Drop-Down Menu
  2. · Review: the initial source code for the CSS-based drop-down menu
  3. · Fixing browser incompatibilities
  4. · Adding JavaScript to correct browser incompatibilities
  5. · The modified version of the CSS-based drop-down menu

print this article
SEARCH DEVARTICLES

Fixing Browser Incompatibilities in a CSS Drop-Down Menu
(Page 1 of 5 )

Now that I have introduced the subject of this series, let me offer you a brief summary of the topics that I covered in the previous tutorial, in case you didn't have a chance to read it. All right, as I said in the beginning, the purpose of this article series is to illustrate how to create an extensible drown-down menu by utilizing only a combination of standard markup and CSS styles. In this way I hope to demonstrate that seemingly-complex web user interfaces can be created without the need to appeal to complicated development methodologies.

Based upon the previous concept, in the first article of this series I showed you how to build the bare bones structure of a CSS-based drop-down menu. It was comprised originally of some basic (X)HTML unordered lists and links, along with a few straightforward CSS styles. As you'll recall, at the end of that particular tutorial, I turned the menu into a fully-functional piece of code, relying only on the correct support offered by most non-based IE browsers for the "hover" CSS pseudo-class.

Unfortunately, Internet Explorer doesn't support this crucial feature, which means that it'll be necessary to incorporate some JavaScript code into the initial incarnation of this drop-down menu to make it work with IE too. Of course, this implies that part of the accessibility offered by the menu in question must be sacrificed, but that's the cost one has to pay for using non-standard browsers.

So far, so good. Now that you hopefully recalled the most important concepts regarding the development of this CSS-based menu, it's time to see how to add  a short piece of JavaScript code to its initial definition, which will make it work seamlessly with Internet Explorer.

With the preliminaries out of the way, let's continue this instructive journey now!


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials