JQuery/CSS with Internet Explorer 8 does not show the background-image
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.
// 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<6) {
counter++;
} else {
counter = 1;
}
}
});
Here is my CSS:
#top_banner {
background: #fff;
background-image: url("../images/banner-1.png");
background-repeat:no-repeat;
color: #fff;
height: 370px;
padding: 1em;
}
EDIT: (HTML added)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head><title><?= $title ?></title>
<!-- load style framework 960 -->
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/960.css" />
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/reset.css" />
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/text.css" />
<!-- load custom styles -->
<link rel="stylesheet" type="text/css" href="<?= base_url(); ?>css/custom.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?= base_url();?>scripts/general.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container_16">
<div id="top_menu" class="grid_16">
<div class="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">item 5</a></li>
<li><开发者_Go百科;a href="#">item 6</a></li>
</ul>
</div>
<div class="tool">
<ul>
<li><a href="#">one ▾</a></li>
<li><a href="#">two ▾</a></li>
<li><a href="#">three ▾</a></li>
</ul>
</div>
<div class="search">
<form>
<input type="text" value="search..."></input>
</form>
</div>
</div>
<div class="clear"></div>
<div id="top_banner" class="grid_16"> </div>
<div class="clear"></div>
<div class="grid_4 mockup">460px</div>
<div class="grid_4 mockup"><p>460px</p></div>
<div class="grid_4 mockup"><p>460px</p></div>
<div class="grid_4 mockup">460px</div>
<div class="clear"></div>
</div>
</body>
</html>
Works fine for me. It just takes time for the first time the images are loaded.
Though you should update this line, just to be sure, from:
var link = "url(" + banner[counter] + ")";
to
var link = "url('" + banner[counter] + "')";
I don't see anything highly unusual with your JavaScript or CSS. You might consider posting your HTML just in case. Also, you say the images won't show. Does the initial image show or is it the case that the images won't rotate?
Have you tried troubleshooting in IE? Add an alert in StepThroughBanners to be sure it is being called.
Another possibility is that you might need to specify additional CSS properties to get this to render in IE. Maybe IE's default value for a given property like width, z-index, etc. differs from the other browsers.
You might also check your settings in IE. Are you running in compatibility mode?
Just a quick guess, but aren't you missing 's when you generate the CSS-property?
You're using
var link = "url(" + banner[counter] + ")";
what should return a string like url(mylocation/myfile.jpg). Maybe try using
var link = "url('" + banner[counter] + "')";
instead what should return url('mylocation/myfile.jpg').
加载中,请稍侯......
精彩评论