Navigation hides behind IFrame in Internet Explorer

• 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: 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.