Databases
StackOverflow2013
Postsdbo
POweb page displays abnormally on google-chrome
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POweb page displays abnormally on google-chrome
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRNA
    1. USRNA
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POweb page displays abnormally on google-chrome
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COWill need more information, like the CSS and maybe a link to the jQuery plugin you're trying to use.... And when you say "can't display", do you mean it doesn't display correctly, or it doesn't display at all? You're also missing " type="image/x-icon" " for the favicon The more information we have, the easier it is to help :)
      singulars
      1. POweb page displays abnormally on google-chrome
      1. USMattisdada
    2. COits better to create fiddle/online demo will be more suitable, by seeing code its not easy to get the problem solve in your situation.
      singulars
      1. POweb page displays abnormally on google-chrome
      1. USw3uiguru
    3. CO@HappySingh:That's a good suggestion. The problem is I don't have a online place to do that.
      singulars
      1. POweb page displays abnormally on google-chrome
      1. USRNA
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload