Details
-
Type:
Bug
-
Status:
Closed
-
Priority:
Minor
-
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: WCM, WCM > Navigation
-
Labels:None
-
Liferay Contributor's Agreement:Accept
-
Similar Issues:
Description
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.
David, thanks for identifying this bug. M3 build has been released. Can you test the bug against it: http://goo.gl/A6fpc? Good catch!