Looking for some help for a small display bug. Here is a code sample running on JBoss 7.0.2.Final with IceFaces 2.0.2 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style>
*{margin: 0;padding: 0;font-family: Helvetica, Arial, Verdana ;font-size: 12px;}
.mainmenubar{width: 100%;height: 32px;background-color: blue;}
.mainmenubarItem{float: left;height: 27px;border-right: 1px solid white;padding-top: 5px;}
.mainmenubarItem a, .mainmenubarItem a:hover, .mainmenubarItem a span{color: white;font-size: 16px;font-weight: bold;text-decoration: none;}
.mainmenubarSubMenu{position: absolute;background-color: #F5F5F5;}
</style>
</h:head>
<h:body>
<div style="background-color: grey; width: 100%; height: 50px;" />
<ice:form id="menuform">
<ice:menuBar styleClass="mainmenubar" orientation="horizontal">
<ice:menuItem styleClass="mainmenuitem" id="mainmenu1" onclick="return false;" value="MENU1">
<ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu1" onclick="return false;" />
<ice:menuItem value="SUBMENU1" styleClass="submenuitem" id="submenu2" onclick="return false;" />
</ice:menuItem>
<ice:menuItem styleClass="mainmenuitem" id="mainmenu2" onclick="return false;" value="MENU2" />
</ice:menuBar>
</ice:form>
<div class="bottom" style="background-color: yellow; width: 100%; height: 1800px;" />
</h:body>
</html>
Seems I cannot directly upload files attached to this post to show screenshots. However, you should be able to copy/paste this code into any IceFaces project with similar configuration, open an IE7 version (in fact I do use IE8 with "compatibility view" mode activated, wonder if it has an effect).
If you do not scroll the page and hover the MENU1, you'll see the SUBMENU correctly displayed. However, if you scroll a little the page to have the menu on top of the page and hover the MENU1, you'll see that the SUBMENU is displayed about 50px under the menu. consequently, you'll never be able to click on the second menu...
Cannot figure out why this does not work. I had a look at the IceFaces showcase on http://component-showcase.icefaces.org/component-showcase/showcase.iface and saw it does work on my IE version (cannot really attest the showcase do use the same version of IceFaces as I do).
I made an additional test : taking the showcase code locally shows the same behaviour (with bug). Here is the exact code I'm running :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jstl/core" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ice="http://www.icesoft.com/icefaces/component">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/xmlhttp/css/rime/rime.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_style.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_overrides.css" />
<link rel="stylesheet" type="text/css" href="http://component-showcase.icefaces.org/component-showcase/css/showcase_layout.css" />
</h:head>
<h:body>
<ice:panelGroup styleClass="componentBox">
<ice:panelGroup styleClass="synopsisBox menuBarContainer">
<ice:outputText value="The menuBar component provides a robust menu system." />
<ice:outputText value="In the box below, choose the orientation of the Menu Bar and then select a menu item. The backing been value of the selected item will be reflected under Server-side Backing Bean Values." />
</ice:panelGroup>
<ice:panelGroup styleClass="clearer" />
<!-- main menu declaration -->
<ice:panelGroup styleClass="exampleBox menuBarContainer">
<ice:menuBar id="menuBar" orientation="horizontal">
<!-- File menu -->
<ice:menuItem value="File" id="file" onclick="return false;">
<ice:menuItem onclick="return false;" id="open" value="Open" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/open.gif"></ice:menuItem>
<ice:menuItem id="close" value="Close" onclick="return false;"></ice:menuItem>
<ice:menuItem id="recent" value="Recent" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/recent.gif" onclick="return false;">
<ice:menuItem id="file1" value="File 1" onclick="return false;"></ice:menuItem>
<ice:menuItem id="file2" onclick="return false;" value="File 2">
<ice:menuItem id="para1" onclick="return false;" value="Para 1"></ice:menuItem>
<ice:menuItem id="para2" value="Para 2" onclick="return false;"></ice:menuItem>
<ice:menuItem id="para3" value="Para 3" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<ice:menuItem value="File 3" id="file3" onclick="return false;"></ice:menuItem>
<ice:menuItem value="File 4" id="file4" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<ice:menuItem id="save" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/save.gif" value="Save" onclick="return false;"></ice:menuItem>
<ice:menuItemSeparator />
<ice:menuItem id="print" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/print.gif" value="Print" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- Edit menu -->
<ice:menuItem value="Edit" id="edit" onclick="return false;">
<ice:menuItem id="cut" value="Cut" onclick="return false;"></ice:menuItem>
<ice:menuItem id="copy" value="Copy" onclick="return false;"></ice:menuItem>
<ice:menuItem id="paste" value="Paste" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- View menu -->
<ice:menuItem value="View" id="view" onclick="return false;">
<ice:menuItem id="zoom_in" value="Zoom In" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomin.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="zoom_out" value="Zoom Out" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/zoomout.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="fit_in_window" value="Fit In Window" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/fitinwindow.gif" onclick="return false;"></ice:menuItem>
<ice:menuItem id="actual_size" value="Actual Size" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/actualsize.gif" onclick="return false;"></ice:menuItem>
</ice:menuItem>
<!-- Help Menu -->
<ice:menuItem value="Help" id="help" onclick="return false;">
<ice:menuItem id="docs" value="Documentation" icon="http://component-showcase.icefaces.org/component-showcase/images/menu/help.gif" link="http://www.icefaces.org/main/resources/documentation.iface" target="_blank" />
</ice:menuItem>
</ice:menuBar>
</ice:panelGroup>
<ice:panelGroup styleClass="clearer" />
</ice:panelGroup>
<div style="height: 1800px;width: 100%;" />
</h:body>
</html>
If someone can test this code on IE7 or IE8 with compatibility view to confirm the bugged behavior, would already help.
I do also wonder if this problem is related to the fact we do use here an IE8 version with "compatibility view" and not a standalone IE7 (does IE8 with compatibility mode send IE8 or IE7 headers to the server ?). Can anyone test with a standalone IE7 ?
Any help will be greatly appreciated.
IceFaces 3 corrected this bug, no need anymore for a workaround.