DNN navigation hides behind IFrame in Internet Explorer

Question

I had this issue with a website that was built with DNN where the navigation menu stayed hidden behind an iframe on internet explorer.

After a short search on the net, I found the problem was due to how IE processed windowed and windowless elements. Jordan Gray's answer here explained the reasoning behind this problem.

However, even after this, I still had the issue because the dnn navigation menu used an un-ordered list and it wasn't immediately clear to me that I had to place an iframe after every list item.

So after struggling with this for awhile, I finally figured it out and I wanted to share it so it may benefit someone dealing with the same issue.

Answer 1

My website used gravity skin, so updated the js code in \Portals_default\Skins\Gravity\Simple\SimpleTokens.txt to detect IE and place iframe under each li.

Inside of $().ready(function(), I added:

if ($.browser.msie) {
        ifrm = document.createElement('iframe');
        ifrm.className = 'cover';
        $("#dnn_pnav li .item").append( ifrm );
    }

I also added this class to \Portals\0\portal.css for the new iframes:

.cover {
    position: absolute;
    border: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

This may not be an elegant solution but it worked in this case and I couldn't come up with anything else better than this.