Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery/CSS with Internet Explorer 8 does not show the background-image
    primarykey
    data
    text
    <p>I have the following code in JQuery (JavaScript), and works fine in Chrome, Safari and Firefox. However, it does not show them in Internet Explorer 8. What could be possibly wrong? I am using 960gs as CSS framework.</p> <pre><code>// JavaScript var site_root = "http://localhost:8080"; var banner = new Array(); banner[1] = site_root + "/images/banner-1.png"; banner[2] = site_root + "/images/banner-2.png"; banner[3] = site_root + "/images/banner-3.png"; banner[4] = site_root + "/images/banner-4.png"; banner[5] = site_root + "/images/banner-5.png"; banner[6] = site_root + "/images/banner-6.png"; var counter = 1; $(document).ready(function() { $('#top_banner').hide(); $('#top_banner').slideDown('slow'); var timer = setInterval(StepThroughBanners, 5000); function StepThroughBanners() { var link = "url(" + banner[counter] + ")"; $('#top_banner').css("background-image", link); if(counter&lt;6) { counter++; } else { counter = 1; } } }); </code></pre> <p>Here is my CSS:</p> <pre><code>#top_banner { background: #fff; background-image: url("../images/banner-1.png"); background-repeat:no-repeat; color: #fff; height: 370px; padding: 1em; } </code></pre> <p><strong>EDIT:</strong> (HTML added)</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;head&gt;&lt;title&gt;&lt;?= $title ?&gt;&lt;/title&gt; &lt;!-- load style framework 960 --&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?= base_url(); ?&gt;css/960.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?= base_url(); ?&gt;css/reset.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?= base_url(); ?&gt;css/text.css" /&gt; &lt;!-- load custom styles --&gt; &lt;link rel="stylesheet" type="text/css" href="&lt;?= base_url(); ?&gt;css/custom.css" /&gt; &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;script src="&lt;?= base_url();?&gt;scripts/general.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container_16"&gt; &lt;div id="top_menu" class="grid_16"&gt; &lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;item 6&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="tool"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;one &amp;#x25BE;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;two &amp;#x25BE;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;three &amp;#x25BE;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="search"&gt; &lt;form&gt; &lt;input type="text" value="search..."&gt;&lt;/input&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="top_banner" class="grid_16"&gt;&amp;nbsp;&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="grid_4 mockup"&gt;460px&lt;/div&gt; &lt;div class="grid_4 mockup"&gt;&lt;p&gt;460px&lt;/p&gt;&lt;/div&gt; &lt;div class="grid_4 mockup"&gt;&lt;p&gt;460px&lt;/p&gt;&lt;/div&gt; &lt;div class="grid_4 mockup"&gt;460px&lt;/div&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    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. This table or related slice is empty.
 

Querying!

 
Guidance

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