almostsane
New Member
Hi All, I'm new here and need some help.
I am working on an internal project, basically it is listing of Quality Assurance files (mostly PDF) with a nice navigation and GUI. all the pages are simple HTML.
one of the requirements was for the PDFs to open within the webpage itself, so i am using iframes. now here comes the fun....
I have a vertical CSS-based menu with sub-menus that float over the iframe.
these work ok when the content of the Iframe is a htmlo page, but float behind it when its a pdf. the way i worked around this is to have the content of the submenu in a seprate html file, and load it into a iframe which displays when you hover over the relevent main menu item. this works in Firefox, and Crome,(i tried a number of other fixes before this one)
but come to everybodie's "favorite" browser, IE(8) all it displays is a white box for the Iframe.
I'm not too concerned if the fix is messy and non-compliant with the usual web standards, as this is for use on a closed network. most of the people who will be using this will be running IE7 or IE8, so can anyone help please.
my code is as follows....
relevent css
menu item
the page in firefox
the page in IE
I am working on an internal project, basically it is listing of Quality Assurance files (mostly PDF) with a nice navigation and GUI. all the pages are simple HTML.
one of the requirements was for the PDFs to open within the webpage itself, so i am using iframes. now here comes the fun....
I have a vertical CSS-based menu with sub-menus that float over the iframe.
these work ok when the content of the Iframe is a htmlo page, but float behind it when its a pdf. the way i worked around this is to have the content of the submenu in a seprate html file, and load it into a iframe which displays when you hover over the relevent main menu item. this works in Firefox, and Crome,(i tried a number of other fixes before this one)
but come to everybodie's "favorite" browser, IE(8) all it displays is a white box for the Iframe.
I'm not too concerned if the fix is messy and non-compliant with the usual web standards, as this is for use on a closed network. most of the people who will be using this will be running IE7 or IE8, so can anyone help please.
my code is as follows....
relevent css
HTML:
div.menu ul li ul {
list-style: none;
position: absolute;
left: 135px;
top: 0;
display: none;
}
div.menu ul li:hover ul { display: block; }
HTML:
</div>
<img src="../images/text_bot.jpg" width="666" height="25" /></div>
<div id="menu" class="menu"><img src="../images/Menu_top.jpg" width="135" height="11" />
<ul>
<li id="qa"><a href="../qa.html"><span>QA Manuals</span></a></li>
<li id="as3800"><a href="../as3800.html"><span>AS3800</span></a></li>
<li id="forms"><a href="../forms.html"><span>Forms</span></a></li>
<li id="proc"><a href="../proc.html"><span>Procedures</span></a></li>
<li id="msds"><a href="../msds.html"><span>MSDS</span></a>
<ul>
<li><iframe style=" position:absolute; left:0px; top:0px;" width="128" height="271" scrolling="no" frameborder="no" src="../msds_menu.html"></iframe><\li>
</ul>
</li>
<li id="pol"><a href="../pol.html"><span>Policies</span></a></li>
<li id="cert"><a href="../cert.html"><span>Certs</span></a></li>
<li id="job"><a href="../job.html"><span>Job</span></a></li>
<li id="min"><a href="../min.html"><span>Minutes</span></a></li>
</ul>
</div>the page in IE
