Hey everyone,

This is my first time posting here so forgive me if i don't say something right or posted this in the wrong section or something like that. I know certain die hard forum-ers get a little snippy about that

ANWAYS


I'm working on a site for a car detailing business
HERE'S WHAT I HAVE SO FAR:
http://wish-makers.org/ecodetail/supersized3/index.html

i'm using the plug in "Supersized" to get the background of the page a fullscreen jquery slideshow. The site looks fine on chrome and IE but not on Safari. The DIV Layers dont show up. I've used 2 different codes and tried rearranging the div layers in coding. Also tried changing "Position: absolute" to "Position: relative" and still it hid some layers and relocated others.

Here's the codes i tried using

Code:
<!--
default.html
Supersized - Fullscreen Slideshow jQuery Plugin Version 3.0
By Sam Dunn (www.buildinternet.com // www.onemightyroar.com)
Website: www.buildinternet.com/project/supersized
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

	<head profile="http://gmpg.org/xfn/11">

	<title>High End Eco Detail </title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script src="js/effects.core.js"></script>
	<script src="js/effects.slide.js"></script>
	
	<script type="text/javascript" src="supersized.3.0.js"></script>
	<script type="text/javascript">  
		$(function(){
    $.fn.supersized.options = {  
        startwidth: 1200,  
        startheight: 800,
        vertical_center: 1,
        slideshow: 1,
        navigation: 1,
        thumbnail_navigation: 1,
        transition: 1,
        pause_hover: 0,
        slide_counter: 1,
        slide_captions: 1,
        slide_interval: 6000,
        slides : [
            {image : 'slides/1.jpg'},
            {image : 'slides/2.jpg'},  
            {image : 'slides/3.jpg'},
            {image : 'slides/5.jpg'},
        ]
    };
 $('#supersized').supersized(); 
});	</script>
	
	<style type="text/css"></style>
<link rel="stylesheet" href="main.css" type="text/css" />
<div id=layer1 style="position:absolute; top:0; left:0; width:100%; height:61px; z-index:1; padding:0px; border: #000000 0px solid; background-color:#000000; background-image:url(http://wish-makers.org/ecodetail/supersized3/topdivbg.jpg); layer-background-image:url();">
</div>

<div id=layer1 style="position:absolute; top:0; left:532; width:100%; height:61px; z-index:1; padding:0px; border: #000000 0px solid; background-color:; background-image:url(); layer-background-image:url();">
<center><img src="http://www.wish-makers.org/ecodetail/supersized3/logo.png"></center>
</div>
</head>

<body>

<!--Loading display while images load-->
<div id="loading"> </div>
 
<!--Slides-->
<div id="supersized"></div>
 
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-4.newrelic.com","c3243eb641","1135151","MV0AZ0VZXUNQAhALXQgXI1BDUVxeHggKBlce",0,318,new Date().getTime()]);</script>

<div id="navigation">
	<a href="#">GALLERY</a>
	<a href="#">ABOUT</a>
	<a href="#">RATES</a>
	<a href="#">CONTACT</a>
</div>
<div style="position:absolute;bottom:0;"><img src="http://www.wish-makers.org/ecodetail/supersized3/quote.png" alt="" height="97" width="460"> </div>
</body>
</html>
also tried

Code:
<html>
<head>
<title>High End Eco Detai</title>
<style type="text/css"></style>
<link rel="stylesheet" href="main.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script src="js/effects.core.js"></script>
	<script src="js/effects.slide.js"></script>
	
	<script type="text/javascript" src="supersized.3.0.js"></script>
	<script type="text/javascript">  
		$(function(){
    $.fn.supersized.options = {  
        startwidth: 1200,  
        startheight: 800,
        vertical_center: 1,
        slideshow: 1,
        navigation: 1,
        thumbnail_navigation: 1,
        transition: 1,
        pause_hover: 0,
        slide_counter: 1,
        slide_captions: 1,
        slide_interval: 6000,
        slides : [
            {image : 'slides/1.jpg'},
            {image : 'slides/2.jpg'},  
            {image : 'slides/3.jpg'},
            {image : 'slides/5.jpg'},
        ]
    };
 $('#supersized').supersized(); 
});	</script>
 
</head>

<body>

<div id=layer1 style="position:absolute; top:0; left:0; width:100%; height:61px; z-index:1; padding:0px; border: #000000 0px solid; background-color:#000000; background-image:url(http://wish-makers.org/ecodetail/supersized3/topdivbg.jpg); layer-background-image:url();">
</div>

<div id=layer1 style="position:absolute; top:0; left:532; width:100%; height:61px; z-index:1; padding:0px; border: #000000 0px solid; background-color:; background-image:url(); layer-background-image:url();">
<center><img src="http://www.wish-makers.org/ecodetail/supersized3/logo.png"></center>
</div>

<!--Loading display while images load-->
<div id="loading"> </div>
 
<!--Slides-->
<div id="supersized"></div>
 
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://d1ros97qkrwjf5.cloudfront.net/42/eum/rum.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-4.newrelic.com","c3243eb641","1135151","MV0AZ0VZXUNQAhALXQgXI1BDUVxeHggKBlce",0,318,new Date().getTime()]);</script>

<div id="navigation">
	<a href="#">GALLERY</a>
	<a href="#">ABOUT</a>
	<a href="#">RATES</a>
	<a href="#">CONTACT</a>
</div>
<div style="position:absolute;bottom:0;"><img src="http://www.wish-makers.org/ecodetail/supersized3/quote.png" alt="" height="97" width="460"> </div>


</body> 


</html>
If one of you awesome people could help, i would love you forever. Thanks!