-
Type:
Bug
-
Status: Closed
-
Resolution: Won't Fix
-
Affects Version/s: 6.1.1 CE GA2, 6.1.20 EE GA2
-
Fix Version/s: 6.1.1 CE GA2, 6.1.20 EE GA2
-
Component/s: ~[Archived] WCM > Navigation
-
Labels:None
-
Liferay Contributor's Agreement:Accept
When adding an IFrame to a page and for example showing a PDF in it, the top navigation will hide behind the PDF in Internet Explorer, no matter what z-index one sets.
This is a known IE issue and not really a Liferay bug, but we can have a workaround here so it will work (almost) fine in Liferay.
By adding some empty IFrames under the child menu items it will be usable again. This is my current navigation.vm:
<nav class="$nav_css_class" id="navigation"> <h1> <span>#language("navigation")</span> </h1> <ul> #foreach ($nav_item in $nav_items) #if ($nav_item.isSelected()) <li class="selected"> #else <li> #end <a href="$nav_item.getURL()" $nav_item.getTarget()><span>$nav_item.icon() $nav_item.getName()</span></a> <!--[if IE 7]> #set ($size = $nav_item.getChildren().size() * 25) <![endif]--> <!--[if IE 9]> #set ($size = $nav_item.getChildren().size() * 24) <![endif]--> #if ($nav_item.hasChildren()) <ul class="child-menu"> <!--[if IE 7]> <iframe src="about:blank" style="height: ${size}px; filter: alpha(opacity=50);"></iframe> <![endif]--> <!--[if IE 9]> <iframe src="about:blank" style="height: ${size}px; filter: alpha(opacity=50);"></iframe> <![endif]--> #foreach ($nav_child in $nav_item.getChildren()) <!--[if IE 8]> <iframe src="about:blank"></iframe> <![endif]--> #if ($nav_child.isSelected()) <li class="selected"> #else <li> #end <a href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child.getName()</a> </li> #end </ul> #end </li> #end </ul> </nav>
Furthermore some changes in custom.css:
#navigation li.hover .child-menu { background: #1E2529; display: block; position: absolute; width: 200px; z-index: 250; } #navigation .child-menu li { border-width: 0 0 1px; display: block; float: none; margin: 0; background: #020509 no-repeat 5px 50%; } .ie7 #navigation .child-menu li a { zoom: 1; background: #020509 no-repeat 5px 50%; } #navigation iframe { position: absolute; left: 0px; width: 280px; height: 23px; } .ie7 #navigation iframe { height: 25px; filter: alpha(opacity=50); }
I'm not sure if we need all these conditions but this way it looks the best in my opinion.
The attached screenshots are from an IE7.