Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 443
  • Last Modified:

iframe FF but not IE

I'm showing the code for an iframe that works great in Firefox, but in I.E. the iframe is always open (inline).  If I add display:none in the CSS, then the frame never shows, even though I have display:inline on the hover.
Explanation:  Show a list that when on hover, it displays an iframe.  On click, it goes to another form.  Can't use Ajax - just need help on current code (if possible).
BBDetails.php just displays a table.
Thanks in advance!
<style type="text/css">
  div.iframe-holder > div {
    display:none;
    position: absolute;
    width: 650px;
    height: 300px;
    z-index: 1000;

    margin-top: -20px;
    margin-left: 22px;

  }
  div.iframe-holder > div > iframe {
 
    width: 100%;
    height: 100%;
    border:0;
 }
 
  div.iframe-holder:hover > div  {
    display:inline;
    margin-top: -130px;  
    top:auto; 
    left: 120px;
    z-index: 999;
 }
</style>

  <style type="text/css">
  div.iframe-holder > div {
    display:none;
    position: absolute;
    width: 650px;
    height: 300px;
    z-index: 1000;

    margin-top: -20px;
    margin-left: 22px;

  }
  div.iframe-holder > div > iframe {
 
    width: 100%;
    height: 100%;
    border:0;
 }
 
  div.iframe-holder:hover > div  {
    display:inline;
    margin-top: -130px;  
    top:auto; 
    left: 120px;
    z-index: 999;
 }
</style>
<?php 
// fill an array ($rarr) from a database

$ctr = count($rarr);
for($a=0; $a < count($rarr); $a++) {
  $str=($rarr[$a]);
  $tmparr=explode("\t", $str);
  $tmp = "temp$a";
?>

  <div class='iframe-holder'><b>
  <a  href="javascript:ShowProject('<?php echo $tmp1; ?>'"   id="<?php echo $tmp; ?>  "> 
  <?php echo  $tmparr[5] ?></font></a></b>
  <div class='ifrm'>
     <iframe  src="BBDetails.php?tmp1=<?php echo $tmp1.'&tmp2='.$tmp2; ?>">
     </iframe>
  </div>
</div>

Open in new window

0
dcass
Asked:
dcass
  • 3
1 Solution
 
andrewkhanCommented:
display: none will basically mean the box is non existent to the browser and hover would not work because according to the browser there is nothing there to hover over.

You could try using


opacity: 0.0;

and then for the hover

opacity: 1.0;

Taking note to check for browser compatibility.
0
 
dcassAuthor Commented:
Nope - any other ideas?  
0
 
dcassAuthor Commented:
Got the solution - want to come back and post code before closing if I can, but found out it's like Flash - needs separate controls, which is great.
Using style in CSS works for firefox, but IE needs style on actual line of code, at least the way I did it, which again worked in all browsers doing it that way, so I am very happy with the solution.
0
 
dcassAuthor Commented:
This can be done many different ways, but the solution is correct, especially if you want it to work in all browsers.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now