Display="Position: Relative;" is Juggling in IE (Browser Mode: IE7/8/9 - Document Mode: Quirks) But If I changed Document Mode from Quirks to IE7/8 or even 9 it's working fine. How to set through CSS this issue? Please see sample code below:CSS\[code\].aFlyOut{ padding: 10px; bottom: 0px; border: 1px solid #a6adb3; background-color: #FFFFFF; position: relative; z-index: 9999; }.aFlyoutCollapse{ background-image: url("/vtpOnline/images/settings.png"); background-repeat: no-repeat; background-position: 100% 50%; cursor
ointer; width:40px; height: 20px; text-indent: 21px; color: #FFFFFF;} .aFlyoutExpand{ background-image: url("/vtpOnline/images/settings.png"); background-repeat: no-repeat; background-position: 100% 50%; cursorointer; width:40px; height: 20px; text-indent: 21px; color: #FFFFFF;}.aFlyoutButton{ height: 12px; float: right; width: 38px; cursor: hand; padding-right: 4px;}.aFlyout{ float: right; background-color: #FFFFFF; border:1px solid #a5acb2; right: 6px; #right: 8px; padding: 0px;}.aFlyoutHeader{ padding: 4px 6px 3px 0; background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat; color: #FFFFFF; text-indent: 23px; font-size: 11px; font-weight: bold;}.aFlyoutLinkWrapper{ padding:5px;}.aFlyoutLinkWrapper a{ padding: 5px; color: #010356; font-size: 11px; display: block; text-decoration: none;}.aFlyoutLinkWrapper a:hover{ color: #0060ff; background-color: #f2f2f2;}.aFlyoutRefreshLink{ background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%; text-indent: 12px; #text-indent: 10px;}\[/code\]HTML\[code\]<div class="aFlyoutButton" id="aFlyoutLink"> <!-- Action Flyout Action Button --> <div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div> <div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()"> <!-- Action Flyout Action Header --> <div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div> <!-- Action Flyout Links Panel --> <div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="http://stackoverflow.com/questions/15804785/#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div> </div></div>\[/code\]When i mouse hover it shows:
However, it should be as:
ointer; width:40px; height: 20px; text-indent: 21px; color: #FFFFFF;} .aFlyoutExpand{ background-image: url("/vtpOnline/images/settings.png"); background-repeat: no-repeat; background-position: 100% 50%; cursorointer; width:40px; height: 20px; text-indent: 21px; color: #FFFFFF;}.aFlyoutButton{ height: 12px; float: right; width: 38px; cursor: hand; padding-right: 4px;}.aFlyout{ float: right; background-color: #FFFFFF; border:1px solid #a5acb2; right: 6px; #right: 8px; padding: 0px;}.aFlyoutHeader{ padding: 4px 6px 3px 0; background: url("/vtpOnline/images/actionFlyoutHeaderIcon.gif") #090999 no-repeat; color: #FFFFFF; text-indent: 23px; font-size: 11px; font-weight: bold;}.aFlyoutLinkWrapper{ padding:5px;}.aFlyoutLinkWrapper a{ padding: 5px; color: #010356; font-size: 11px; display: block; text-decoration: none;}.aFlyoutLinkWrapper a:hover{ color: #0060ff; background-color: #f2f2f2;}.aFlyoutRefreshLink{ background: url("/vtpOnline/images/addNote.png") no-repeat 0 50%; text-indent: 12px; #text-indent: 10px;}\[/code\]HTML\[code\]<div class="aFlyoutButton" id="aFlyoutLink"> <!-- Action Flyout Action Button --> <div class="aFlyoutExpand" title="Actions" id="aFlyoutButton" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()" onClick="aFlyoutExpandCollapse()"> </div> <div id="aFlyout" class="aFlyout" style="display: block;" onMouseOver="aFlyoutExpand()" onMouseOut="aFlyoutExpandCollapse()"> <!-- Action Flyout Action Header --> <div class="aFlyoutHeader" style="color: #FFFFFF;font-size: 11px !important;"> Actions </div> <!-- Action Flyout Links Panel --> <div class="aFlyoutLinkWrapper" style="width: 100px;"> <a class="aFlyoutRefreshLink" href="http://stackoverflow.com/questions/15804785/#" id="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" name="j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION" onClick="aFlyoutExpandCollapse();;A4J.AJAX.Submit('j_id_jsp_2094016106_0','j_id_jsp_2094016106_1',event,{'oncomplete':function(request,event,data){Richfaces.showModalPanel('AddNoteModalPanel');setValues();return false;},'similarityGroupingId':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION','parameters':{'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION':'j_id_jsp_2094016106_1:REFRESHNOTESCREENACTION'} ,'actionUrl':'/vtpOnline/faces/order/edit/default.jsf'} );return false;">Notes</a> </div> </div></div>\[/code\]When i mouse hover it shows: