Help Please with IE and Iframes

Discussion in 'Web Design' started by almostsane, Nov 25, 2009.

to remove all ads.
  1. almostsane

    almostsane New Member

    Messages:
    9
    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
    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; }
    menu item
    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 firefox
    firefox.jpg
    the page in IE
    ie.jpg
     
  2. almostsane

    almostsane New Member

    Messages:
    9
    I should clerify that I would also accept anything that gets the sub-menu to load over the top of the PDF when it is being viewed. I tried having an empty iframe as a buffer, but it prevented the buttons from being clicked.

    anyhelp would be welcome
     
  3. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Have you tried using the z-index property for the vertical menu?
     
  4. almostsane

    almostsane New Member

    Messages:
    9
    Yes. but because the PDF loads the acrobat plugin, it sits outside the realms of css. it really is annoying....
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    hmmm...but doesn't the pdf load into the iframe? how can that be outside the css realm? If it is in the markup its in the css realm.

    FYI , I don't use iframes very much but I know css very well, so just trying to give my two cents.

    If you set the position for each element (UL and iframe) and then the z-index, making sure the UL has a higher number, that doesn't keep it above the iframe?

    Do you have a link where we can see it? or an example?
     
  6. almostsane

    almostsane New Member

    Messages:
    9
    The plugin loads an instant of Acrobat over the top of the browser, so ignores Css. so the PDF isnt actually in the iframe. it just occupies the same space as the iframe, but sitting on top and ignoring css. its really starting to annoy me
     
  7. jberk

    jberk New Member

    Messages:
    1
    just a thought

    I had sort of the same issue....

    I limited the length of the menu text in the DB (varchar(32)) and used CSS to position the iframe over to the right side so the menu never overlapped.

    just an idea....
     
  8. bluecollar01

    bluecollar01 New Member

    Messages:
    90
    not sure if this will help or not as you didn't mention if it displayed properly in IE7 but if you put this code in the header it will tell IE8 to emulate the IE7 rendering.

    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />

    let me know if it works. thanks.
     
  9. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    This is not a CSS issue. CSS can only be applied to objects rendered within the browser. The pdf is rendered within a plugin and not by the broswer itself, which is why your CSS is not having an effect. Sorry to disappoint.

    There are tools however, to convert pdf's to html on the fly. On the downside, you might loose the formating and what not of the files content.
     

Share This Page