Clearing issue with background and images (was: JQuery doesn't work in Firefox)

HTML & CSS
1

I am new to Javascript and JQuery. I am trying to do a fade in/fade out of 4 different image sets on my home page. I found this rotatePics jquery script in the Novice to Ninja book. It seems to work ok in IE, but does nothing in Firefox. Can someone please help me? :

[COLOR=“Blue”]$(document).ready(function(){
rotatePics(1);
});

function rotatePics(currentPhoto) {
var numberOfPhotos = $(‘.photos img’).length;
currentPhoto = currentPhoto % numberOfPhotos;

$(‘.photos img’).eq(currentPhoto).fadeOut(function() {
// re-order the z-index
$(‘.photos img’).each(function(i) {
$(this).css(
‘zIndex’, ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
);
});
$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 5000);
});
}[/COLOR]

I have the following in my header section of the homepage:

<script type=“text/javascript” src=“js/jquery-1.4.min.js”></script>
<script type=“text/javascript” src=“js/script.js”></script>

Here is the code in the hompage:

<div id=“imageanimation”>
<table id=“picturetable”>
<tr>
<td class=“photos”>
<img alt=“Funds at Work” src=“images/image-set/image1b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/word1b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/image1a.jpg” />
</td>
<td class=“photos”>
<img alt=“Funds at Work” src=“images/image-set/image2a.jpg” />
<img alt=“Funds at Work” src=“images/image-set/word2b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/image2b.jpg” />
</td>
<td class=“photos”>
<img alt=“Funds at Work” src=“images/image-set/image3b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/word3b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/image3a.jpg” />
</td>
<td class=“photos”>
<img alt=“Funds at Work” src=“images/image-set/image4a.jpg” />
<img alt=“Funds at Work” src=“images/image-set/word4b.jpg” />
<img alt=“Funds at Work” src=“images/image-set/image4b.jpg” />
</td>
</tr>
</table>
</div> <!-- close imageanimation div –>

Here is the CSS for it:

[COLOR=“blue”]#picturetable {
float:left;
height:212px;
margin:0 auto;
position:relative;
left:15px;
z-index:-1;
}

.photos img {
position: absolute;
}

.photos {
width: 212px;;
height: 212px;
overflow: hidden;
padding:5px;
padding-top:10px;
padding-bottom:10px;
}[/COLOR]

WHAT AM I DOING WRONG???

2

Well.I spoke to soon. My changes remedied the problem with the images displaying in Firefox. However, now in IE (7), the Navigation drop down menus display behind the set of images instead of in front ot them. Again, I have a CSS problem. Perhaps you can still submit this to the other forum you mention?

3

Yes, please. Hopefully someone in a CSS forum can help. Thank you so much for your help. It has been invaluable!

4

Wow, that is it! The “clear: both” statement is wiping out the images for some reason. Do you have any suggestions on how to get my footer in the right place with out having to use the clear statement?

5

It works in IE8’s compatibility view, but not otherwise.

I’m also told that:

/images/body-bkg.gifFailed to load resource: the server responded with a status of 404 (Not Found)

With the script removed I still cannot see the images, so something else is interfering with them.

Removing the footer allows the images to be seen. It seems to be the “clear: both” CSS statement on the footer that’s forcing the images to not be seen.

I think that this is a CSS problem that needs to be solved.

6

OMG! What you said about the “background color to apparently go over the groups of images”, made me start to think about it from that perspective, so I removed the wrapper bkg, and found the images underneath it. It’s fixed!!! Actually, the problem seemed to be with the z-indices, not the footer. THANK YOU SO MUCH!!! You helped me figure this out!!! YEAH!!!

7

Thanks so much for helping me. Here is the link to the webpage:
http://www.foundationforlovejoyschools.org/

8

I don’t, my specialty is javascript, but there will almost certainly be someone in the CSS forum who can help.

Would you like me to move this thread with a slightly different thread name, to the CSS forum?

9

If you can put up a test page on the internet, that will help us to help you test it more effectively.

10

The code works with the 4 sets of images in IE, but does nothing in Firefox.

Can anyone tell what to do to get it to work in Firefox also?

I haven’t tested it in Chrome, Safari or anything else, so I don’t know if it works in those.

11

No problem.

So to summarize, the footer has a clear:both that’s causing the background color to apparently go over the groups of images near the top of the page.

12

The original is designed to work with one set of photos, whereas you’re wanting to rework it so that it works with multiple sets of images.

If it helps anyone else looking at this, the original code can be found at http://www.sitepoint.com/books/jquery1/code.php under chapter 4.7