0
На моем сайте мое фоновое изображение отображается отлично на firefox, но на хроме есть большие белые боксы на боках, и они уходят, когда слайд слайда jquery перемещается на следующее изображение. I иметь фоновое изображение, связанное в CSS с телом, в котором все мое содержание включено в слайдер изображения.Фоновое изображение отлично видно на firefox, но не на хроме
ВОТ живой сайт
http://wilsontsa.org/Technology%20courses/Technology%20Courses.html
HTML
<body>
<div id="bar">
</div>
<center>
<div id="pagecontainer">
<div id="container">
<div id="navigation">
<ul id="navigation">
<li id="techlink" class="dropdown"><a href="../Technology courses/Technology Courses.html" style="color:#046f83">Technology Courses</a>
<ul class="sub_navigation">
<li><a href="../Technology courses/Computer Science.html"> Computer Science</a></li>
<li><a href="../Technology courses/Digital Video.html"> Digital Video </a></li>
<li><a href="../Technology Courses/Technology Innovation.html">Technology Innovation</a></li>
<br />
<li><a href="../Technology courses/Visual Design and Image Applications.html">Visual Design and Image App.</a></li>
<br />
<li><a href="../Technology courses/Web Design.html">Web Design</a></li>
</ul>
</li>
<li id="englink" class="dropdown"><a href="../Engineering Courses/Engineering Courses.html">Engineering Courses</a>
<ul class="sub_navigation">
<li><a href="../Engineering Courses/Introduction to Engineering and Design.html">Intro to Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Computer Integrated Manufacturing.html">Computer Integrated Manufact.</a></li>
<br />
<li><a href="../Engineering Courses/Principles of Engineering.html">Principles of Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Digital Electronics.html">Digital Electronics</a></li>
<br />
<li><a href="../Engineering Courses/Civil Engineering and Architecture.html">Civil Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Aerospace Engineering.html">Aerospace Engineering</a></li>
<br />
<li><a href="../Engineering Courses/Engineering Design and Development.html">Engineering Design</a></li>
<br />
<li><a href="../Engineering Courses/I-Stem.html"> I-STEM </a></li>
</ul>
</li>
<li id="STEMlink"><a href="../STEM/stem.html">STEM</a></li>
<li id="weblink" class="dropdown"><a href="../Webmaster/Evolution.html">Webmaster</a>
<ul class="sub_navigation">
<li><a href="../Webmaster/Evolution.html">Evolution</a></li>
<li><a href="../Webmaster/Adapting.html">Adapting</a></li>
<li><a href="../Webmaster/Advertising.html">Business Model</a></li>
<li><a href="../Webmaster/Solution.html">Future</a></li>
</ul>
</li>
<div id="tsa" class="TSA">
<li><a href="../TSA Chapter/TSA.html"><img src="../Images/Design Images/TSA-LOGO.png" width="50" height="34" /></a></li>
</div>
</ul>
</div> <!--navigation div -->
</ul>
</center>
<div id="spacer">
<div id="wrapper">
<div>
<div class="slider-button" onclick="ss.move(-1)">«</div>
<div id="slideshow">
<ul id="slides">
<li><img src="../Javascript Photos/Picture1.png" width="900" height="300" alt="Coral Reef"></li>
<li><img src="../Javascript Photos/Picture2.png" width="900" height="300" alt="Sea turtle">
</li>
<li><img src="../Javascript Photos/Picture3.png" width="900" height="450" alt="Coral Reef"></li>
<li><img src="../Javascript Photos/Picture4.png" width="900" height="300" alt="Blue Fish"></li>
</ul>
</div>
<div class="slider-button" onclick="ss.move(1)">»</div>
</div>
<ol id="pagination" class="pagination">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
CSS
body {
background-image: url(Images/Tech nology%20Images/bg_Tech.gif);}
Slider CSS
li.current {
background:#102c75;}
#slideshow {
float:left;
width:900px;
height:300px;
border:2px solid #ccc;
background:#fff;
position:relative;
top:16px;
z-index:-1;}
#slides {
position:relative;
width:900px;
height:300px;
list-style:none;
overflow:auto;
z-index:-1;}
#slides li {
width:900px;
height:300px;}
.fader-slide {
opacity:0;
position:absolute;}
.fader-fade {
opacity:1;
-webkit-transition:opacity .4s;
-moz-transition:opacity .4s;
transition:opacity .4s;}
#content {
width:900px;
height:270px;
padding:15px 18px 15px 18px;
background:#fff;}
#content h1 {
font:22px Georgia,Verdana;
margin-bottom:15px;
color:#036;}
#caption {
background:#fff;
position:relative;}
#caption div {
position:absolute;
bottom:0;
left:0;
width:900px;
padding:15px 18px 10px 18px;
background:#000;
background:rgba(0,0,0,.7);}
#caption h2 {
font:18px Georgia,Verdana;
margin-bottom:6px;
color:#eee;}
#caption p {
line-height:1.4;
color:#aaa;}
В моем браузере отлично работает Chrome v25. Кстати, вы используете тег CENTER на своей странице, который теперь устарел. –
HTML на вашей странице для вашего NAV является своего рода сломанным в конце кода NAV - проверьте это. У вас также есть DIV, где есть дочерний элемент UL, который не является допустимым HTML. Вы можете использовать только элементы LI как дочерние элементы UL или OL. –