Плагин JQuery Cycle не показывает наложение текста в IE8 - PullRequest
Новая
       23

Плагин JQuery Cycle не показывает наложение текста в IE8

0 голосов
/ 14 июля 2011

Позвольте мне начать с того, что я начинающий в веб-дизайне, поэтому мой код и веб-сайт могут быть немного грязными (хотя я стараюсь делать чистую работу).

Я успешно добавил JQueryПодключите плагин к домашней странице моего сайта, который отлично смотрится в Chrome, Firefox и даже работает в IE9, когда я принимаю дополнения.Но, когда я тестировал его на IE8, ни один плагин не был загружен, и он показывает текст, который он показывает, обычным шрифтом черного цвета, который не виден, потому что фон также черный.

Я предполагаю, что проблема лежит где-то внутри IE8 и файла CSS, хотя я не совсем уверен.Я надеюсь, что есть решение для этого.

jquery-1.3.1.min.js

Вот мой код: 

<div id="data" style="position: absolute; left: -12px; top: 237px; width: 775px; height: 556px; z-index: 11">

<div id="layer8" style="position: absolute; left: 13px; top: 3px; width: 760px; height: 456px; z-index: 17">

        <div id="gallery">
<a href="#" class="show">
    <img src="images/intro/Slide_1.jpg" alt="Flowing Rock" width="997" height="532" title="" alt="" rel="<h3intro>Great Neck - A Community of Luxury Homes</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_2.jpg" alt="Grass Blades" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;KNOWLEDGE...</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_3.jpg" alt="Ladybug" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;INTEGRITY...</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_4.jpg" alt="Lightning" width="997" height="532" title="" alt="" rel="<h3intros>SEEK THE BEST</h3intros><h3intro>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SERVICE...</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_5.jpg" alt="Lotus" width="997" height="532" title="" alt="" rel="<h3intro>We love what we sell...</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_6.jpg" alt="Mojave" width="997" height="532" title="" alt="" rel="<h3intro>And only sell what we love...</h3intro>"/>
</a>
<a href="#">
    <img src="images/intro/Slide_7.jpg" alt="Pier" width="997" height="532" title="" alt="" rel="<h3intros>FIND&nbsp;&nbsp;&nbsp;&nbsp;</h3intros><h3intro>JANET ETESSAMI REALTY</h3intro>"/>
</a>

            <div class="caption">

                <div class="content">
                </div>

            </div>

        </div>

        <div class="clear">
        </div>

</div>

Благодаря этому, есть ли шанс, что я смогу указать, какой именно код я должен поместить?

1 Ответ

0 голосов
/ 14 июля 2011

Последние несколько часов я тоже бился головой о стену и видел твой пост.Добавление z-index как к оверлейному элементу css, так и к контейнеру слайд-шоу исправило это для меня.

Пример:

Добавьте более высокий номер z-index для оверлейного класса CSS.Используйте более низкий z-индекс для контейнера CSS для слайд-шоу. 

<style>
.overlay-css 
{ 
   your css
   z-index: 4; 
}
.slideshow { 
   your css
   z-index: 3; 
}
</style>

<div id="slideshow-wrapper">
    <div class="overlay-css">This is the text that appears over the slideshow.</div>    
    <div class="slideshow">
        <img src="image1.jpg" width="100" height="100" alt="test-1"/>
        <img src="image2.jpg" width="100" height="100" alt="test-2"/>
    </div>
</div>
...