I recently developed a custom SAP Portal Component that includes a JSP file with Javascript. This component is placed on a SAP Portal page alongside another iView, which contains multiple headers and text within an iframe. My objective is to dynamically generate a table of contents using Javascript, style it with the provided CSS code, and integrate it into the iframe. The Javascript functions smoothly across all browsers, successfully creating the table of contents. However, I have encountered an issue where the styling only renders correctly in Chrome; when viewed in IE, the CSS does not apply.
#contentsdiv{
border: 1px solid #CCC;
display: inline-block;
*zoom: 1;
*display: inline;
padding: 5px 5px;
}
#contentstitle{
display: inline-block;
*zoom: 1;
*display: inline;
padding: 0px 0px 2px 0px;
}
#expandButton{
display: inline-block;
*zoom: 1;
*display: inline;
font-size:14px;
padding: 0px 0px 2px 2px;
text-decoration: none;
}
#expandButton:hover {
cursor:pointer;
text-decoration: underline;
}
#listdiv > ul{
padding-left:0px;
list-style-type: none;
padding-bottom:2px;
}
#listdiv > ul > li > ul, #listdiv > ul > li > ul >li >ul{
list-style-type: none;
padding-bottom:2px;
}
#listdiv > ul > li > a{
text-decoration:none;
font-size:14px;
}
#listdiv > ul > li > ul > li > a{
text-decoration:none;
font-size:14px;
}
#listdiv > ul > li > ul > li > ul > li > a{
text-decoration:none;
font-size:14px;
}
#listdiv > ul > li > a:hover , #listdiv > ul > li > ul > li > a:hover , #listdiv > ul > li > ul > li > ul > li > a:hover{
text-decoration: underline;
}
Do you have any suggestions or solutions for this issue?