Div displays in Firefox, Safari, Chrome, etc. but not in Internet Explorer

This div transition displays fine in most browsers, but not in Internet Exporer. You can see the error by clcking on the secondview link on the left.

Here is the HTML and CSS source:

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
   <meta charset="UTF-8" />
   <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Page Transitions with CSS3</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <meta name="description" content="" />
   <meta name="keywords" content="" />
   <meta name="author" content="Your name" />
       <link rel="shortcut icon" href="../favicon.ico"> 
       <link rel="stylesheet" type="text/css" href="css/demo.css" />
       <link rel="stylesheet" type="text/css" href="css/style3.css" />
       <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/blitzer/jquery-ui.css" type="text/css" />
       <link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' />

       <script src="javascript/jquery-1.7.1.min.js" type="text/javascript"></script>
       <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
       <script src="javascript/jquery.easy-confirm-dialog.js"></script>
 </head>
 <body>
     <div id="home" class="content">
     <div class="content">
         <center><h2>Div #1</h2></center>
         Div #1
     </div>
</div>
<!-- /Home -->

<!-- SecondView --> 
    <div id="secondview" class="panel">
            <div class="content">
                 <center><h2>Div #2</h2>
             Div #2
            </div>
        </div>
    <!-- /SecondView -->

<!-- Header with Navigation -->
    <div id="header">
        <ul id="navigation">
        <li><a id="link-home" href="#home">Home</a></li>
        <li><a id="link-secondview" href="#secondview">Second View</a></li>
        </ul>
    </div>
</body>
</html>

Answers


You are using CSS3 for the transition, which is not available for IE. From your CSS.

.panel{
    [...]
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -ms-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

Need Your Help

Loading Variable from URL, only works for numbers?

javascript jquery html5

My URL is example.com/load_item.html?item=QB123

AngularJS: ui-router secured states

javascript angularjs security angular-ui-router

I have one main controller for my app - AppCtrl and use ui-router. How can I make secured states?