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!
Before you post, read our: 
DIV Layers not showing up in Safari.
