Question

I have a popup using div and javascript in a jsp page which also has some richface controls.

<a class="pr-toolbar-link pr-icon-help" href="#"
  onclick="popupWindow('aboutPopup',true);" 
  onblur="popupWindow('aboutPopup',false);">About</a>
<div id="aboutPopup" class="popup">
  <div class="popupbody">
<p>Some Message</p>
  </div>
</div>

When I click "About" the popup is displayed properly in firefox i.e. on the top of all other things, but in IE it is overlapped by other controls. Following is the CSS

.popup { border: solid 1px #333; font-family: Tahoma; font-size: 12px; display: none; position: absolute; width:300px; z-index:1; }
.popuptitle { background: #784574; color: white; font-weight: bold; height: 15px; padding: 5px;      }
.popupbody { background: #dee5ec; padding: 5px; text-align: center; }
#aboutPopup { top: 27px; left: 110px; }

I tried setting z-index value to higher then all other controls but still nothing different happens.

Edit:

Firefox popup

IE7 Popup

IE7 Popup

Answer 1

The problem was the placement of the code to add the popup. I was adding the code close to the like i.e. before the menu control. So even after changing the z-index it was not in front of menu control in IE7. I just moved the code to the end after the menu control code and it worked in IE7 as well. Anyway thanks guys for suggestions.