photoslider position is messed up! [Archive]

griffinwebnet

08-17-2011, 05:01 PM

Hi All,
I Am Making a site for a dj company. ive got an s3slider photo slider from here:

http://www.serie3.info/s3slider/

I have several other jquery plugins working on the site with no problems. It actually displays fine on IE FFX Opera Safari, However it shows up way off to the right on android browser & ffx mobile (Not sure about safari mobile or the iOS browser, i dont have those.)

I cant figure out what is wrong. Here is a link to the prototype:
http://cgentertainment.com/neu/2. so that you can see what i mean.

here is the code for index.html and style.css

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CG Entertainment</title>

<link rel="stylesheet" type="text/css" href="./css/style.css" />


<script type="text/javascript" src="./js/jquery162.min.js"></script>
<script type="text/javascript" src="./js/jquery.nav.js"></script>
<script type="text/javascript" src="./js/jquery.backstretch.js"></script>
<script type="text/javascript" src="./js/s3Slider.js"></script>



<script>
$.backstretch("./images/bg.png");
</script>

<script type="text/javascript">
$(document).ready(function() {
$('#slider1').s3Slider({
timeOut: 7000
});
});
</script>

</head>
<body>
<div id="main-pan">
<div id="head-pan"> </div>
<div id="nav-pan">
<ul class="menu" id="menu">
<li><a href="#" class="menulink">Home</a></li>
<li><a href="#" class="menulink">Event Types</a>
<ul>
<li><a href="#">Weddings</a></li>
<li>
<a href="#" class="sub">School Dances</a>
<ul>
<li class="topline"><a href="#">k-8 School</a></li>
<li><a href="#">High School</a></li>
<li><a href="#">School Organizations</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">Parties</a>
<ul>
<li class="topline"><a href="#">Grad Parties</a></li>
<li> <a href="#" class="sub">Soldiers</a>
<ul>
<li class="topline"><a href="#">Boot Camp</a></li>
<li><a href="#">Going Away</a></li>
<li><a href="#">Returning Home</a></li>
</ul>
</li>
<li> <a href="#" class="sub">Birthday Parties</a>
<ul>
<li class="topline"><a href="#">11 & Under</a></li>
<li><a href="#">12 - 15</a></li>
<li><a href="#">Sweet 16</a></li>
<li><a href="#">17-21</a></li>
<li><a href="#">22 & Older</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
</ul>
</li>
<li><a href="#" class="menulink">Non-Dropdown</a></li>
<li>
<a href="#" class="menulink">Dropdown Two</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li>
<a href="#" class="sub">Navigation Item 2</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#" class="menulink">Dropdown Three</a>
<ul>
<li><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
<li><a href="#">Navigation Item 3</a></li>
<li><a href="#">Navigation Item 4</a></li>
<li><a href="#">Navigation Item 5</a></li>
<li>
<a href="#" class="sub">Navigation Item 6</a>
<ul>
<li class="topline"><a href="#">Navigation Item 1</a></li>
<li><a href="#">Navigation Item 2</a></li>
</ul>
</li>
<li><a href="#">Navigation Item 7</a></li>
<li><a href="#">Navigation Item 8</a></li>
<li><a href="#">Navigation Item 9</a></li>
<li><a href="#">Navigation Item 10</a></li>
</ul>
</li>
</ul>
</div>
<div id="body-pan">

<div id="slider1">
<ul id="slider1Content">

<li class="slider1Image">
<img src="./images/slide1.png" alt="2" />
<span class="left"><strong>School Dance!</strong><br />CG Entertainment will take your school gym or field house and turn it into an amazing and action packed nightclub. This is an experience that the students will never forget!</span></li>


<li class="slider1Image">
<img src="./images/slide5.png" alt="5" />
<span class="left"><strong>Lighting Setup</strong><br />We take at least 2 hours before each gig to set up a premium Lighting system. It looks like a mess here, but in the end it will look clean and neat as we pride ourselves on our neat clean setups.</span></li>
<li class="slider1Image">
<img src="./images/slide6.png" alt="6" />
<span class="left"><strong>Sound Setup</strong><br />We take at least 2 hours before each gig to set up our sound system. It looks like a mess here, but in the end it will look clean and neat as we pride ourselves on our neat clean setups. </span></li>
<li class="slider1Image">
<img src="./images/slide7.png" alt="7" />
<span class="left"><strong>Premier Sound</strong><br />After Setup, Our premier sound system looks neat and clean, and as always, sounds Great!</span></li>
<li class="slider1Image">
<img src="./images/slide8.png" alt="8" />
<span class="left"><strong>Premier Lights</strong><br />After Setup, our premier lighting system looks neat and clean and is sure to make a night to remember!</span></li>
<li class="slider1Image">
<img src="./images/slide2.png" alt="3" />
<span class="left"><strong>The Result</strong><br />The Final result is an action packed night, full of loud music, great fun, exciting light shows, and memories that are sure to last forever!</span></li>
<div class="clear slider1Image"></div>
</ul>
</div>

</div>
</div>
</body>

<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>

</html>

And Style.css

body {margin:15px; font:11px Verdana;}

div#main-pan{width: 1000px; height: 1500px; background-image: url(../images/bg-trans.png); margin-left: auto; margin-right: auto; }
div#head-pan{height: 180px; width: 1000px; background-image: url(../images/banner.png); margin-left: auto; margin-right: auto; padding-top 5px; }
div#nav-pan{width: 1000px; margin-left: auto; margin-right: auto; height: 27px; background:url(../images/header.gif); background-repeat: repeat-x; }
ul.menu {list-style:none; margin:0; padding:0;}

ul.menu * {margin:0; padding:0;}

ul.menu a {display:block; color:#000; text-decoration:none; }

ul.menu li {position:relative; float:left; margin-right:2px; }

ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none;}

ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0;}

ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1;}

ul.menu ul li a:hover {background-color:#c5c5c5;}

ul.menu ul ul {left:148px; top:-1px;}

ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(../images/header.gif); width:134px;}

ul.menu .menulink:hover, ul.menu .menuhover {background:url(../images/header_over.gif);}

ul.menu .sub {background:#d1d1d1 url(../images/arrow.gif) 136px 8px no-repeat;}

ul.menu .topline {border-top:1px solid #aaa;}

/* ==========================================SLYDER============================================ */

#slider1 {
width: 980px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */

}

#slider1Content {
width: 980px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;

}
.slider1Image {
float: left;
/* position: relative; */
position: absolute;
display: none;
}
.slider1Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.slider1Image span strong {
font-size: 14px;
}
.left {
top: 0;
left: 0;
width: 110px !important;
height: 280px;
}
.right {
right: 0;
bottom: 0;
width: 90px !important;
height: 290px;
}
ul { list-style-type: none;}

Thanks In Advance For The Help! :)

-JL Griffin

Deadweight

08-17-2011, 06:23 PM

here:

#slider1 {
width: 980px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
margin-left: -10px;

}

griffinwebnet

08-17-2011, 07:11 PM

here:

#slider1 {
width: 980px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
margin-left: -10px;

}

Thta still didnt fix it. :( I updated the css on the server so t he new style.css contains that line. check again though, perhaps its just my phone?

griffinwebnet

08-17-2011, 07:15 PM

Never Mind I Fixed it! I changed slider 1 to this:

#slider1 {
width: 980px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
margin-left: -10px;
float: left;

}

I added 'float: left;' i dont know why i didnt think of that sooner. :P

Thanks guys!

-JL

Deadweight

08-17-2011, 07:27 PM

Uhhh do you know its not centered? 0.o
At least in Chrome