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

dcassAsked:
Who is Participating?
 
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
 
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:
This can be done many different ways, but the solution is correct, especially if you want it to work in all browsers.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.