Проблема кросс-браузерной совместимости между IE8 и MOzilla Firefox

Question

Я загрузил изображения, размещенные выше, сначала показывая вывод Firefox ', а второй показывая вывод IE8.
Мой CSS выглядит так

.popBox {
    position: absolute;
    z-index: 2;
    width: 52%;

    border: 1px solid gray;
    background: #cccccc;
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    text-align:center;
    display:inline;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
}
span {
    color: blue;
    font-weight: sans-serif;
}

Я хочу добиться того же, что показано в FF на IE8.

любая помощь будет принята с благодарностью.

P.S. Я не очень разбираюсь в части HTML / CSS. Показанный выше CSS встроен в страницу JSP. но, похоже, я застрял на нем сегодня.

[EDIT]

я пытался добавить что-то вроде этого -ms-border-radius: 50px | 50%; и я слежу за этим

и когда я перезагружаю страницу, ничего не происходит !! забыть форму эллипса, я не могу показать какой-либо элемент при наведении курсора мыши на IE8.

Вот моя полная страница JSP.

    <script>
      function showBox(text, obj) {
            helpNode = document.createElement('div');
            helpNode.id = 'popBox';
            helpNode.setAttribute('class','popBox');
            helpNode.innerHTML = text;
            obj.appendChild(helpNode);
     }

     function hideBox() {
           node = document.getElementById('popBox');
           node.parentNode.removeChild(node);
    } 
</script>
<style type="text/css">
.popBox {
    position: absolute;
    z-index: 2;
    width: 52%;

    border: 1px solid gray;
    background: #cccccc;
    -moz-border-radius: 50px/50px;


    -webkit-border-radius: 50px 50px;
    border-radius: 50px/50px;
    text-align:center;
    display:inline;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
}
span {
    color: blue;
    font-weight: sans-serif;
}
</style>

<c:if test="${sessionScope.helpPurpose != null && sessionScope.helpPurpose != ''}" >
<table border="0" cellspacing="0" cellpadding="0" width="15%">
<tr>

<td>
<div onmouseover="showBox('<table  ><tr><td><b>Purpose:       </b><%=request.getSession().getAttribute("helpPurpose") %></td><br> <br><br></table>', this)" onmouseout="hideBox()"><span><img  id="imgperName"  src="<c:url value='/images   /strutsmenu/plus.png'/>" ></span></div>
</td>
<td>
<div><span><font size="2"> Purpose Of Form</font></span></div>
</td>
</tr>
</table>
</c:if>

Answer 1

Ну, border-radius изначально не реализовано в версии т.е. до ie9.

Чтобы использовать эту функцию в т. Е. Предлагаю посмотреть следующую библиотеку JavaScript: http://css3pie.com/.