Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    418
    Thanks
    18
    Thanked 2 Times in 2 Posts

    dissappearing divs in IE

    I have a bit of script for a footer section that is to expand up, when the user rolls over it - and go back down, when they are not over it.
    Everything works fine, it seems. But not quite in Internet Explorer. The content inside of the three "ie-curves"-classed boxes is not showing up, for some reason. The animation works fine. and the html inside shows up for a second before the js turns it off. But when I mouse over, the content isn't visible (there. Just not visible) I do see a console error that at line 57 character 5, SCRIPT5009: 'hidden' is undefined When I look at source, it says opacity is 1, and filter: alpha(opacity=100); It shouldn't matter anyway, I understand that jquery has all the browser support built in.

    But still, it's not showing

    Here's the main content, below that, the javascript: (let me know if I missed something important in the post)
    Code:
    <!DOCTYPE html>
    {ip_ban}
    <!--[if IE]>
       <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//en" "http://www.w3.org/TR/html4/loose.dtd">
    <![endif]-->
    <html>
    <head>
      
       <title>MONEXgroup | Canada's premier POS payment service provider, accepting Visa, Mastercard</title>
       <meta name="description" content="MONEXgroup provides payment processing solutions to thousands of merchants across Canada.">
       <meta http-equiv="X-UA-Compatible" content="IE=9" />
       <meta charset="utf-8" />
       {metadata}
       <link href='http://fonts.googleapis.com/css?family=Archivo+Narrow:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css"> 
       <!--[if IE]>
    	<link rel="stylesheet" type="text/css" href="css/IE_styles.css"> 
    <style>
    .drop-menu {
    z-index:2;
    }
    #head-container { 
    FILTER: progid:DXImageTransform.Microsoft.dropShadow( Color=999999,offX=5,offY=5,positive=true);
    }
    #top-shadow-pic {
    display:none !important;
    
    }
    .box-paragraphs {
    opacity:1;
    display:block;
    filter: alpha(opacity = 50);
    }
    
    </style>
       <![endif]-->
      
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="js/respond.src.js"></script> 
    {cms_jquery} 
       <script src="js/jquery.fittext.js"></script>
       <script src="js/functions.js"></script>
    </head>
    <body id="sliderbg">
       
    
    <div id="body1">
    
    </div>
    
    
       <div id="footer-container">
    
          <div id="three-boxes-holder">
             
             <div class="three-boxes">
    <div class="ie-curves">
                <h6>SUCCEED WITH MONEX</h6>
                <p class="box-paragraphs">{global_content name='PRODUCTSsucceed'}</p>
    </div>
             </div>
    
             <div class="three-boxes">
    <div class="ie-curves">
                <h6>PRODUCTS</h6>
    <p class="box-paragraphs">
                 {global_content name='PRODUCTShome'}
    </p>
    </div>
             </div>
    
             <div class="three-boxes">
    <div class="ie-curves">
                <h6>NEWS <span id="news-clarification">Industry & MONEXgroup</span></h6>
                {news number='1' category='Monex News' detailpage="164" moretext="read more..."}
    </div>
             </div>
             <div class="clear-it"></div>
            
          </div> 
          
          <div class="clear-it"></div>
          <div id="foot-nav-main">
    
             <div class="foot-nav-divs">
                <h4 class="foot-headers">ABOUT US</h4>
                <ul class="footer-ul">
                   <li><a href="index.php/about">About Us</a></li>
                   <li><a href="index.php/community-support">Community Support</a></li>
                </ul>
             </div>
            
             <div class="foot-nav-divs">
                <h4 class="foot-headers">SERVICES</h4>
                <ul class="footer-ul">
                   <li><a href="index.php/merchant-support">Merchant Portal</a></li>
                   <li><a href="index.php/onsite-service">Onsite Service</a></li>
                   <li><a href="index.php/chip-technology">Chip technology</a></li>
                   <li><a href="index.php/pci-data-security">PCI Data Security</a></li>
                   <li><a href="index.php/fraud-awareness">Fraud Awareness</a></li>               
                </ul>
             </div>
             
             <div class="foot-nav-divs">
               adf
             </div>
             <div class="foot-nav-divs">
               asdf
             </div>
             <div class="foot-nav-divs">
               asdf
             </div>
             <div class="foot-nav-divs">
                asdf
             </div>
            
             <div class="foot-nav-divs3" id="foot-3divs">
                  
                
              asdff
             </div>   
              
          </div>
    
       </div>
    </div>
     <style>
    
    </style>
    
    <!--[if IE]>
      
    <script type="text/javascript">
    
    h6 {
        font-family: 'Archivo Narrow',sans-serif;
        font-size: 1.5em;
        margin: 0px 0px 8px;
        font-weight: 700;
        color: rgb(193, 49, 57);
        text-align: left;
    }
    #footer-container {
    	filter:none;
    	background-color:#013150;
    	height:190px;
    	}
    	
    #three-boxes-holder {
    	height:108px;
    	}
    .ie-curves {
    	display:block !important;
    }
    .three-boxes > * { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0, M21=0.7071067811865467, M22=-1.4142135623730934, SizingMethod='auto expand')";}
    .three-boxes > * {  filter: progid:DXImageTransform.Microsoft.Matrix(
                M11=3.85,
                M12=-0.2,
                M21=0.0,
                M22=0,
                SizingMethod='auto expand');
    }
    
    </script>
    <![endif]-->
    
    </body>
    </html>
    Javascript:
    Code:
    $(document).ready(function() {
    
    
    $('#foot-nav-main,#footer-container').stop().animate({ height: "50px" }, 30, function() {
        /* animation done */    
        });
    $('#three-boxes-holder').stop().animate({ height: "0px", opacity: "0", marginBottom: "0px"}, 30, function() {
        /* animation done */    
      });
    
    $('.ie-curves').stop().animate({ opacity: "0"}, 30, function() { /* animation done */ });
    
    $(".footer-ul").css('display','none');
    
      $("#footer-container").mouseenter(function(){
    
        $(".footer-ul").css('opacity','0').css('display','block');
        $('#foot-nav-main,#footer-container').stop().animate({ height: "250px" }, 300, function() {
          $('.ie-curves').stop().animate({ opacity: "1"}, 450, function() {
              /* animation done */    
            });    
        });
        
        $('#three-boxes-holder').stop().animate({ height: "130px", opacity: "1", marginBottom: "15px" }, 300, function() {
            
        });
     
        $(".footer-ul").css('display','block').stop().animate({ opacity: 100 }, 6000, function() {
        /* animation done */    
        }); 
      });
      
      
      
      $("#footer-container").mouseleave(function(){
    
        $(".footer-ul").stop().animate({ opacity: 0 }, 220, function() {
          $(".footer-ul").css('display','none'); 
        });
        
        $('.ie-curves').stop().animate({ opacity: "0"}, 25, function() {
          $('#three-boxes-holder').stop().animate({ height: "20px", opacity: "0", marginBottom: "0px" }, 300, function() {
              /* animation done */    
            });  
        });
        
        $('#footer-container').stop().animate({ height: "50px" }, 400, function() { /* animation complete */ });
        $('#foot-nav-main').stop().animate({ height: "32px" }, 400, function() { $(".footer-ul").css('display','none'); }).css({ overflow: hidden });
      });
    
    $(".has-drop").mouseenter(function(){
        $('.drop-menu').stop().animate({ height: "185px" }, 321, function() {
          /* animation done */    
        });
     });
     
     $(".has-drop").mouseleave(function(){
        $('.drop-menu').stop().animate({ height: "0px" }, 621, function() {
          /* animation done */    
        });
     });
     
     
     if ($.browser.msie) {
      $('.ie-curves').css("display","block").css("opacity","1");
      $('.box-paragraphs').css("display","block").css("opacity","1");
       }
      
    });
    Last edited by turpentyne; 11-19-2013 at 04:13 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    418
    Thanks
    18
    Thanked 2 Times in 2 Posts
    I just noticed that the content shows if I go into quirks mode. but not if it's set to standards of ie7,8 or 9. ( Using IE9)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •