Drop down menus, z-index and IE

One of Internet Explorer’s (IE) most commonly encountered bug is when using z-index. I experienced this recently when using the DDSlider plugin for WordPress along with a drop down navigation.

Whilst doing some browser testing I noticed that the drop down menu hides behind the DDSlider. I tried to fix this using z-index. I applied positions and z-index to the offending elements but they still did not behave properly.

After Googling the issue I came across this post which explains the problem perfectly. I needed to apply z-indexes to higher level elements that sit side by side in the DOM. In my example I applied a position:relative; z-index:2 to the #header div and a position:relative; z-index:1 to the #main div. Seems to have done the trick perfectly!

Tags: , , , ,

Subscribe to my feeds

  • articles XML Feed (6)
  • clients XML Feed (3)
  • folio XML Feed (9)
  • labs XML Feed (1)
  • news XML Feed (7)
  • offers XML Feed (3)
  • stuff XML Feed (5)
  • tuts XML Feed (13)
  • Contact Me Get a Quote

    Comments are closed.