title: web page displays abnormally on google-chrome
body: <p>The photo slideshow can't display on google-chrome, but it looks perfect on firefox. The code is here:</p>
  
  <pre><code>    &lt;!doctype html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;xxxxxxx&lt;/title&gt;
          &lt;meta name="keywords" content="xxxxxxxxx" /&gt;
          &lt;meta name="description" content="xxxxxxx, New York" /&gt;
          &lt;link rel="shortcut icon"  href="css/favicon.ico"&gt;
          &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/&gt;
          &lt;link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/&gt;
          &lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/jquery.tn3.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              var tn1 = $('.mygallery').tn3({
                  skinDir:"css",
                  autoplay:true,
                  width:768,
                  delay:5000,
                  skin:"tn3e", 
                  imageClick:"url",
                  image:{
                  crop:true,
                  transitions:[{
                      type:"blinds",
                      duration:300
                      },
                      {
                      type:"grid",
                      duration:160,
                      gridX:9,
                      gridY:7,
                      easing:"easeInCubic",
                      sort:"circle"
                      },{
                      type:"slide",
                      duration:430,
                      easing:"easeInOutExpo"
                      }]
                  }          
                  });
          });
          &lt;/script&gt;
        &lt;/head&gt;
  
        &lt;body&gt;
      &lt;figure class="logo"&gt;
        &lt;img src="css/vbccr.jpg" alt="logo" /&gt;
      &lt;/figure&gt;'
      &lt;div class="nav_example"&gt;
        &lt;div class="menu"&gt;
          &lt;span&gt;'
            &lt;ul id="nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;主页&lt;br /&gt;Home&lt;/a&gt;
                &lt;div class="subs"&gt;
                  &lt;div&gt;
                    &lt;ul&gt;
                      &lt;li&gt;&lt;h3&gt;关于我们&lt;br /&gt;About Us&lt;/h3&gt;
                        &lt;ul&gt;'
                          &lt;li&gt;&lt;a href="#"&gt;陈述&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;历史沿革&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;h3&gt;冯师&lt;br /&gt;Feng&lt;/h3&gt;
                        &lt;ul&gt;'
                          &lt;li&gt;&lt;a href="#"&gt;简介&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;寄语&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;主拜&lt;br /&gt;Sunday&lt;/a&gt;
                &lt;div class="subs"&gt;
                  &lt;div class="wrp2"&gt;
                    &lt;ul&gt;'
                      &lt;li&gt;&lt;h3&gt;&lt;a href="#"&gt;时间地点&lt;br /&gt;Time &amp; Location&lt;/a&gt;&lt;/h3&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h3&gt;师道&lt;br /&gt;Sermons&lt;/h3&gt;
                        &lt;ul&gt;'
                          &lt;li&gt;&lt;a href="#"&gt;2012&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;2011&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;2010&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;2009&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;2008&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;p class="sep"&gt;&lt;/p&gt;
                    &lt;ul&gt;
                      &lt;li&gt;&lt;h3&gt;人学&lt;br /&gt;School&lt;/h3&gt;
                        &lt;ul&gt;'
                          &lt;li&gt;&lt;a href="#"&gt;新班&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;门班&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
  
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
    jQuery(window).load(function() {      
      $("#nav &gt; li &gt; a").click(function () { // binding onclick
          if ($(this).parent().hasClass('selected')) {
              $("#nav .selected div div").slideUp(100); // hiding popups
              $("#nav .selected").removeClass("selected");
          } else {
              $("#nav .selected div div").slideUp(100); // hiding popups
              $("#nav .selected").removeClass("selected");
  
              if ($(this).next(".subs").length) {
                  $(this).parent().addClass("selected"); // display popup
                  $(this).next(".subs").children().slideDown(200);
              }
          }
      });       
  });
  &lt;/script&gt;
  
          &lt;!-- This is gallery setting --&gt;
          &lt;div class="mygallery"&gt;
            &lt;div class="tn3 album"&gt;
          &lt;h4&gt;Large Images&lt;/h4&gt;
          &lt;div class="tn3 description"&gt;Large Images&lt;/div&gt;
          &lt;div class="tn3 thumb"&gt;images/114x72/3.jpg&lt;/div&gt;
          &lt;ol&gt;
            &lt;li&gt;
              &lt;h4&gt;Hdfae&lt;/h4&gt;
              &lt;div class="tn3 description"&gt;daa&lt;/div&gt;
              &lt;a href="images/1.jpg"&gt;&lt;img src="images/114x72/1.jpg" alt="demo" /&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h4&gt;Isolated&lt;/h4&gt;
              &lt;div class="tn3 description"&gt;island&lt;/div&gt;
              &lt;a href="images/2.jpg"&gt;&lt;img src="images/114x72/2.jpg" alt="demo" /&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h4&gt;Town&lt;/h4&gt;
              &lt;div class="tn3 description"&gt;Herceg&lt;/div&gt;
              &lt;a href="images/3.jpg"&gt;&lt;img src="images/114x72/3.jpg" alt="demo" /&gt; &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ol&gt;
            &lt;/div&gt;
            &lt;div class="tn3 album"&gt;
          &lt;h4&gt;Fixed&lt;/h4&gt;
          &lt;div class="tn3 description"&gt;Images&lt;/div&gt;
          &lt;div class="tn3 thumb"&gt;images/114x72/1.jpg&lt;/div&gt;
          &lt;ol&gt;
            &lt;li&gt;
              &lt;h4&gt;Wall&lt;/h4&gt;
              &lt;div class="tn3 description"&gt;Jai&lt;/div&gt;
              &lt;a href="images/920x360/6.jpg"&gt;&lt;img src="images/114x72/6.jpg" alt="demo" /&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h4&gt;City&lt;/h4&gt;
              &lt;div class="tn3 description"&gt;Ne&lt;/div&gt;
              &lt;a href="images/920x360/7.jpg"&gt;&lt;img src="images/114x72/7.jpg" alt="demo" /&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ol&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>tn3e.css:</p>
  
  <pre><code>@charset "utf-8";
  
  .tn3e-gallery {
      position:relative;
      width: 960px;
      height: 550px;
      background-color:#c5c5c5;
      background-image: url('grad.jpg');
      background-position:center center;    
      background-repeat:no-repeat;
      line-height: normal;
  }
  .tn3e-image {
      position:absolute;
      left: 20px;
      top: 20px;
      width: 920px;
      height: 360px;
      background-color: #000000;
  }
  /*
  .tn3e-full-image {
      box-shadow: 0 0 5px rgba(40, 40, 40, 1);
      -webkit-box-shadow: 0 0 5px rgba(40, 40, 40, 1); 
      -moz-box-shadow: 0 0 5px rgba(40, 40, 40, 1); 
  
  } 
  */   
  .tn3e-control-bar {
      position:absolute;
      background: url('bg.png') repeat;
      width:243px;
      height:80px;
  }
  .tn3e-thumbs ul, .tn3e-thumbs li {
      margin: 0;
  }
  .tn3e-thumbs {
      position:absolute;
      width:920px;
      height:80px;
      bottom:20px;
      left:20px;
      background-image: url('thumb_bg.png');    
      background-repeat:repeat-x;
      padding-top:2px;
  }
  .tn3e-thumb {
      padding: 2px;
      cursor:pointer;
  }
  .tn3e-thumb-selected {
      cursor:default;
  }
  .tn3e-thumb img {
      width: 114px;
      height:72px;
  }    
  .tn3e-next {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-20px -3px;
      width: 13px;
      height: 17px;
      right:33px;
      bottom:126px;
      cursor:pointer;
  }
  .tn3e-next:hover {
      background-position:-20px -23px;
  }
  .tn3e-prev {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-2px -3px;
      width: 13px;
      height: 17px;
      left:30px;
      bottom:126px;
      cursor:pointer;
  }
  .tn3e-prev:hover {
      background-position:-2px -23px;
  }
  .tn3e-preloader {
      position:absolute;
      width: 22px;
      height: 8px;
      right:5px;
      top:5px;
  }
  .tn3e-text {
      position: absolute;
      left: 64px;
      bottom: 110px;
      width: 832px;
      height: 40px;
      vertical-align:middle;
      overflow: hidden;
  }
  .tn3e-image-title {
      font-family: Tahoma, Helvetica, sans-serif;
      color:#3f4146;
      font-size:12px;
      width:100%;
      text-align:center;
      font-weight:bold;
  }
  .tn3e-image-description {
      font-family: Tahoma, Helvetica, sans-serif;
      color:#3f4146;
      width:100%;
      text-align:center;
      font-size:10px;
  }
  .tn3e-timer {
      position:absolute;
      width: 100%;
      height: 4px;
      bottom: 0px;
      background: url('bg.png') repeat;
      background: rgba(0, 0, 0, 0.3);
  }
  .tn3e-play {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-2px -80px;
      left:94px;
      top:12px;
      width:57px;
      height:57px;
      cursor:pointer;
  }
  .tn3e-play:hover {
      background-position:-64px -80px;
  }
  .tn3e-play-active {
      background-position:-2px -139px;
  }
  .tn3e-play-active:hover {
      background-position:-64px -139px;
  }
  .tn3e-show-albums {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-35px -39px;
      top:22px;
      left:23px;
      width:37px;
      height:36px;
      padding:0;
      margin:0;
      cursor:pointer;
  }
  .tn3e-show-albums:hover {
      background-position:-76px -39px;
  }
  .tn3e-fullscreen {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-35px -1px;
      top:22px;
      right:23px;
      width:37px;
      height:36px;
      cursor:pointer;
  }
  .tn3e-fullscreen:hover {
      background-position:-76px -1px;
  }
  .tn3e-albums {
      position:absolute;
      width: 920px;
      height: 510px;
      left:20px;
      top:20px;
      font-family: Arial, Helvetica, sans-serif;
      color:#ffffff;
      background-image:url('bg.png');
      background: rgba(0, 0, 0, 0.8); 
  }
  .tn3e-albums h4 {
      position: absolute;
      margin-top: 1.33em;
      font-weight: bold;
      left: 34px;
      top: 10px;
      font-size: 18px;
      color: #c7c8c9;
  }
  .tn3e-inalbums {
      position:absolute;
      top: 80px;
      width: 920px;
      height: 350px;
      padding: 20px;
  }
  .tn3e-album {
      position:absolute;
      width: 420px;
      height: 66px;
      background-color:#111111;
      overflow: hidden;
      cursor:pointer;
      font-size: medium;
  }
  .tn3e-album-over {
      background-color:#222;
  }
  .tn3e-album-selected {
      background-color:#cdcdcd;
      color:#111214;
      cursor:default;
  }
  .tn3e-album-image {
      height: 100%;
      margin-right: 1em;
      overflow:hidden;
      float: left;
  }
  .tn3e-album-title {
      font-size:13px;
      font-weight:bold;
      margin-top: 1em;
  }
  .tn3e-album-description {
      font-size:0.6em;
      height: 3em;
      line-height: 1.6em;
      overflow: hidden;
  }
  .tn3e-albums-next {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-217px -1px;
      width: 97px;
      height: 37px;
      right:20px;
      bottom:20px;
      cursor:default;
  }
  .tn3e-albums-next-over {
      background-position:-217px -40px;
      cursor:pointer;
  }
  .tn3e-albums-prev {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-117px -1px;
      width: 97px;
      height: 37px;
      left:20px;
      bottom:20px;
      cursor:default;
  }
  .tn3e-albums-prev-over {
      background-position:-117px -40px;
      cursor:pointer;
  }
  .tn3e-albums-close {
      position:absolute;
      background-image:url('tn3e.png');
      background-position:-125px -80px;
      width: 27px;
      height: 27px;
      right:31px;
      top:30px;
      cursor:pointer;
  }
  .tn3e-albums-close:hover {
      background-position:-155px -80px;
  }
  
  /* when javascript is disabled */
  .tn3.album, .tn3.album li {
      float:left;
      list-style-type: none;
      margin:4px;
  }
  .tn3.album div, .tn3.album li h4, .tn3.album li div{
      display:none;
  }
  </code></pre>
  
  <p>style.css:</p>
  
  <pre><code>body {
      background:white;
      margin:0px auto;
      padding:0;
      width: 768px;
      color:#eee;
      font-size:medium;
      font-family:Tahoma,Arial,Verdana,sans-serif;
  }
  .logo {
      padding:inherit;
      margin:inherit;
  
  }
  .logo &gt; img {
      width: 768px;
      display:block;
  }
  .nav_example {
      background:url(navigation_bar.gif) no-repeat;
      width:100%;
      height:60px;
      margin:inherit;
      /* border:1px #000 solid; */
      /* border-radius:3px; */
      /* -moz-border-radius:3px; */
      /* -webkit-border-radius:3px; */
  }
  
  
  /* main menu styles */
  .menu {
      padding-top:9px;
      text-align:center;
      width:100%;
  }
  .menu &gt; span {
      display:inline-block;
      margin:10 auto;
  }
  #nav {
      display:inline;
      text-align:center;
      /* text-align:left; */
      position:relative;
      list-style-type:none;
  }
  #nav &gt; li {
      float:left;
      padding:0;
      position:relative;
  }
  #nav &gt; li &gt; a {
      /* border:1px solid transparent; */
      color:#eee;
      display:block;
      font-size:1.05em;
      padding:3px 10px;
      position:relative;
      text-decoration:none;
  }
  #nav &gt; li &gt; a:hover {
      color:#fefefe;
      background-color:#d10e15;
      /* border-color:#999 */
  }
  #nav &gt; li.selected  &gt; a {
      background-color:#d10e15;
      color:#fefefe;
      z-index:0;
  }
  #nav li div {
      position:relative;
  }
  #nav li div div {
      background-color:#1a1a1a;
      display:none;
      font-size:1em;
      margin:0;
      padding:0;
      position:absolute;
      top:5px;
      z-index:1;
      width:200px;
  }
  #nav li div div.wrp2 {
      width:400px;
  }
  #nav .sep {
      left:200px;
      border-left:1px solid #2a2a2a;
      bottom:0;
      height:auto;
      margin:15px 0;
      position:absolute;
      top:0;
      width:1px;
  }
  #nav li div ul {
      padding-left:5px;
      padding-right:5px;
      position:relative;
      width:190px;
      float:left;
      list-style-type:none;
  }
  #nav li div ul li {
      margin:0;
      padding:0;
  }
  #nav li div ul li h3 {
      border-bottom:1px solid #3a3a3a;
      color:#1da0ff;
      font-weight:bold;
      font-size:0.95em;
      margin:8px 0px;
      padding:3px 0px;
  }
  #nav li div ul li h3 a {
      color:#1da0ff;
      display:block;
      text-decoration:none;
  }
  #nav li div ul li h3 a:hover{
      background-color:#d10e15;
      color:#fefefe;
  }
  
  #nav li ul ul {
      padding:0 0 8px;
  }
  
  #nav li ul ul li {
      margin:0;
      padding:0;
  }
  #nav li ul ul li a {
      color:#eee;
      display:block;
      margin-bottom:1px;
      padding:3px 5px;
      text-decoration:none;
      font-size:0.95em;
  }
  #nav li ul ul li a:hover{
      background-color:#d10e15;
      color:#fefefe;
  }
  </code></pre>
  
  <p>The jquery.min.js is the latest from google. And jquery.tn3.min.js is from:</p>
  
  <pre><code>/*!
   * tn3 v1.1.0.28
   * http://tn3gallery.com/
   *
   * License
   * http://tn3gallery.com/license
   *
   * Date: 29 Jul, 2011 16:21:54 +0300
   */
  </code></pre>
  
  <p>And by the way, the favicon can't show in google-chrome either, but successfully in firefox. Does anyone have any idea?</p>