Submenu Fix for Internet Explorer

[Waseem Sadiq]

Hi Folks,

If you're using the Element template in it's full glory and are taking advantage of the super cool submenu feature then you may have come across a display error in Internet Explorer.

The display wierdness happens when you have main menu links (with submenus) over at the right-hand side of the menu bar. What happens is the sometimes not all of the submenus show up and when they do they can sometimes be difficult to hover over - The submenu disappears as soon as you hover past the main menu link.

This error you'll be glad to know isn't due to bad code on our behalf (we used the leanest possible CSS code as always - Kudos to Casey for that) but due to Internet Explorer's (v6 and below) failings in the world of the modern world wide web.

If you'd like to learn how we managed to get to the bottom of this fix (and the CSS theory behind it) then see here

If on the otherhand you just want the fix then follow these instructions:

1) Open up the file template_css.css in your favourite text editor
2) Look for the following lines of code (around liine 508 for those of you with line numbering editors [Crimson Editor is my personal open source favourite at the moment])

Code:

#navbar li ul {
width: 100%;
display: none;
margin: 0;
padding: 0;
position: absolute;
top:33px;
height: 20px;
left: 0;

}

And change it to this:

Code:

#navbar li ul {
width: 100%!important; /*---- compliant browsers understand the !important rule and Internet Explorer (apart from ie7) doesn't----*/
width: 2500px; /*---- this width setting is only for internet explorer versions 6 and under ---*/
display: none;
margin: 0;
padding: 0;
position: absolute;
top:33px;
height: 20px;
left: 0;

}

For new owners of the Element template you have nothing to worry about - this change has already been applied to the files (as of 11pm GMT 3rd October 2006)

Waseem