Can someone take a look at this page: http://www.beaverfamilyministries.org/docs/beaver_family_photos.html and let me know what is going on?
It looks fine in Firefox and Safari on a Mac, but the page is way off to the right in IE on Windows, and the gallery contents are not centered and there is a problem going on with the footer.
The code for the HTML, the "internal.css" file and the "ajax-slideshow.css" is below:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Beaver Family Ministries, Kannapolis, North Carolina</title>
<meta name="generator" content="BBEdit 9.0" />
<link href="../css/internal.css" rel="stylesheet" type="text/css" />
<link href="ajax-slideshow.css" rel="stylesheet" type="text/css" />
<script src="ajax-slideshow.js" type="text/JavaScript" charset="utf-8"></script>
<script type="text/JavaScript" charset="utf-8">
// <![CDATA[
// -----------------------------------------------------------------------------------
//
// This page coded by Scott Upton
// http://www.uptonic.com | http://www.couloir.org
//
// This work is licensed under a Creative Commons License
// Attribution-ShareAlike 2.0
// http://creativecommons.org/licenses/by-sa/2.0/
//
// Associated API copyright 2002, Travis Beckham (www.squidfingers.com)
//
// -----------------------------------------------------------------------------------
// --- version date: 04/30/05 ------------------------------------------------------
var photoDir = "images/"; // Location of photos for gallery
var borderSize = 6; // = 2x CSS border size
// get current photo id from URL
var thisURL = document.location.href;
var splitURL = thisURL.split("#");
var photoId = splitURL[1] - 1;
// if no id in query string then set to 0
photoId = (!photoId)? 0:photoId;
// Define each photo's name, height, width, and caption
var photoArray = new Array(
// Source, Width, Height, Caption
new Array("1.jpg", "500", "500", "Door 1 - Click on the image to view previous or next image"),
new Array("2.jpg", "500", "500", "Door 2 - Click on the image to view previous or next image"),
new Array("3.jpg", "500", "500", "Door 3 - Click on the image to view previous or next image"),
new Array("4.jpg", "500", "500", "Door 4 - Click on the image to view previous or next image"),
new Array("5.jpg", "500", "500", "Door 5 - Click on the image to view previous or next image"),
new Array("40.jpg", "500", "597", "Barry and Cathy - Click to view previous or next image"),
new Array("41.jpg", "600", "833", "Beaver Family - Click to view previous or next image"),
new Array("42.jpg", "479", "391", "Natalie and Family - Click to view previous or next image"),
new Array("43.jpg", "600", "848", "Leslie Beaver - Click to view previous or next image"),
new Array("8.jpg", "500", "500", "Door 8 - Click on the image to view previous or next image"),
new Array("19.jpg", "800", "509", "Cathy Leslie Natalie - Click to view previous or next image"),
new Array("26.jpg", "550", "744", "Leslie and Natalie - Click to view previous or next image"),
new Array("27.jpg", "500", "722", "Leslie Beaver - Click to view previous or next image"),
new Array("45.jpg", "550", "797", "Leslie - Click on the image to view previous or next image"),
new Array("46.jpg", "600", "399", "Leslie and Natalie - Click to view previous or next image"),
new Array("30.jpg", "600", "479", "Barry and The Girls - Click to view previous or next image"),
new Array("44.jpg", "500", "720", "Leslie Beaver - Click on the image to view previous or next image"),
new Array("32.jpg", "600", "394", "Queens For Soldiers - Click to view previous or next image"),
new Array("33.jpg", "550", "765", "Leslie and Natalie - Click to view previous or next image"),
new Array("34.jpg", "550", "764", "Natalie - Click on the image to view previous or next image"),
new Array("35.jpg", "550", "755", "Natalie - Click on the image to view previous or next image"),
new Array("38.jpg", "550", "759", "Natalie at PTL - Click on the image to view previous or next image"),
new Array("6.jpg", "500", "500", "Door 6 - Click on the image to view previous or next image"),
new Array("7.jpg", "500", "500", "Door 7 - Click on the image to view previous or next image"),
new Array("9.jpg", "500", "500", "Door 9 - Click on the image to view previous or next image"),
new Array("10.jpg", "500", "500", "Door 10 - Click on the image to view previous or next image"),
new Array("11.jpg", "500", "500", "Door 11 - Click on the image to view previous or next image"),
new Array("12.jpg", "500", "500", "Door 12 - Click on the image to view previous or next image"),
new Array("13.jpg", "500", "500", "Door 13 - Click on the image to view previous or next image"),
new Array("14.jpg", "500", "500", "Door 14 - Click on the image to view previous or next image"),
new Array("15.jpg", "500", "500", "Door 15 - Click on the image to view previous or next image"),
new Array("22.jpg", "500", "326", "Door 22 - Click on the image to view previous or next image"),
new Array("23.jpg", "400", "262", "Door 23 - Click on the image to view previous or next image"),
new Array("24.jpg", "400", "239", "Door 24 - Click on the image to view previous or next image")
);
// Number of photos in this gallery
var photoNum = photoArray.length;
// Create access to 'Detect' object and a place to put instances of 'HTMLobj'
API = new Detect();
// CREATE INSTANCES & LOAD
loadAPI = function(){
// Instantiate HTMLobj
API.Container = new HTMLobj('Container');
API.Photo = new HTMLobj('Photo');
API.PhotoContainer = new HTMLobj('PhotoContainer');
API.LinkContainer = new HTMLobj('LinkContainer');
API.PrevLink = new HTMLobj('PrevLink');
API.NextLink = new HTMLobj('NextLink');
API.CaptionBlock = new HTMLobj('CaptionBlock');
API.Counter = new HTMLobj('Counter');
API.Caption = new HTMLobj('Caption');
API.LoadImg = new HTMLobj('LoadImg');
// Show initial photo
cyclePhoto(photoId);
}
onload = loadAPI;
// Fade in photo when it is loaded from the server
initFade = function(){
// Show PhotoContainer again
API.PhotoContainer.show();
// Be certain the tween is complete before fading, too
var fade_timer = setInterval('startFade()', 1000);
// Fade photo in when ready and clear listener
startFade = function(){
if(API.Container._tweenRunning == false){
clearInterval(fade_timer);
// Be certain fade is done running before allowing next/previous links to work
// This avoids rapid fade-in when users click next/previous links in quick succession
var adv_timer = setInterval('permitNextPrev()', 500);
// Permit next/previous links to function normally when fade is completed
permitNextPrev = function(){
if(API.Photo._fadeRunning == false){
clearInterval(adv_timer);
// Only show links if there is more than one photo in array
if(photoNum > 1){
API.LinkContainer.displayShow();
document.getElementById('NextLink').onclick = nextPhoto;
document.getElementById('PrevLink').onclick = prevPhoto;
}
} else {
return;
}
}
// Swap out loading animation to spare CPU cycles when hidden anyway
API.LoadImg.setSrc("images/slideshow/start.gif");
// Show caption again
API.CaptionBlock.show();
// Fade photo in
API.Photo.fadeIn(0,15,33);
} else {
return;
}
}
}
// Prevent next/previous
falsify = function(){
return false;
}
// Go to next photo
nextPhoto = function(){
// Go to next photo
if(photoId == (photoArray.length - 1)){
photoId = 0;
} else {
photoId++;
}
cyclePhoto(photoId);
}
// Go to previous photo
prevPhoto = function(){
// If at start, go back to end
if(photoId == 0){
photoId = photoArray.length - 1;
} else {
photoId--;
}
cyclePhoto(photoId);
}
// Alter class of elements
changeElementClass = function(objId,setClass) {
document.getElementById(objId).className = setClass;
}
// Function to load subsequent photos in gallery
cyclePhoto = function(photoId){
// Swap in loading animation
API.LoadImg.setSrc("images/slideshow/loading_ani2.gif");
// Hide link container if it is not already hidden
API.LinkContainer.displayHide();
// Hide photo container and caption temporarily
API.Photo.hide();
API.Photo.setOpacity(0);
API.CaptionBlock.hide();
// Get dimensions of photo
var wNew = photoArray[photoId][1];
var hNew = photoArray[photoId][2];
// Start tween on a delay
var wCur = API.Container.getWidth() - borderSize;
var hCur = API.Container.getHeight() - borderSize;
// Begin tweening on a short timer
setTimeout('API.Container.tweenTo(easeInQuad, ['+wCur+', '+hCur+'], ['+wNew+','+hNew+'], 7)',500);
setTimeout('API.LinkContainer.sizeTo('+wNew+','+hNew+')',500);
setTimeout('API.PrevLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.NextLink.sizeTo('+wNew/2+','+hNew+')',500);
setTimeout('API.CaptionBlock.sizeTo('+wNew+',18)',500);
// Get new photo source
var newPhoto = photoDir + photoArray[photoId][0];
// Set source, width, and height of new photo
API.Photo.setSrc(newPhoto);
API.Photo.sizeTo(wNew,hNew);
// Set links to new targets based on photoId
API.NextLink.setHref("#" + (photoId+1));
API.PrevLink.setHref("#" + (photoId+1));
API.Counter.setInnerHtml((photoId+1)+" of "+photoNum+" |");
API.Caption.setInnerHtml(photoArray[photoId][3]);
// Event listeners for onload and onclick events
document.getElementById('Photo').onload = initFade;
// Block next/previous links until permitNextPrev() has fired
document.getElementById('NextLink').onclick = falsify;
document.getElementById('PrevLink').onclick = falsify;
}
// ]]>
</script>
</head>
<body>
<!-- Begin Container Div-->
<div id="container">
<!-- Begin Header Div --->
<div id="header"> <a href="../index.html"><img src="../images/header_pic.jpg" title="Beaver Family Ministries" alt="Beaver Family Ministries" /></a>
<ul id="topNav">
<li><a href="../index.html">Home</a></li>
<li><a href="about_beaver_family.html">About Us</a></li>
<li><a href="beaver_family_testimony.html">Testimony</a></li>
<li><a href="beaver_family_photos.html">Photos</a></li>
<li><a href="beaver_family_music.html">Music</a></li>
<li><a href="beaver_family_bookstore.html">Bookstore</a></li>
<li><a href="contact_beaver_family_ministries.html">Contact Us</a></li>
</ul>
</div>
<!-- End headeer div-->
<!-- Begin Main Content -->
<div id="photoMainContent">
<!-- resizable container -->
<div id="Container">
<div id="LinkContainer">
<a href="#" id="PrevLink" onfocus="this.blur();" accesskey="[" title="« Previous Photo" class="plainlink"><span>Previous</span></a><a href="#" id="NextLink" onfocus="this.blur();" accesskey="]" title="Next Photo »" class="plainlink"><span>Next</span></a>
</div>
<div id="PhotoContainer"><img id="Photo" src="images/1.gif" alt="" width="300" height="150" /></div>
<div id="LoadContainer"><img id="LoadImg" src="images/loading_ani2.gif" alt="Loading..." width="48" height="54" /></div>
</div>
<!-- counter and caption -->
<p id="CaptionBlock"><span id="Counter"></span> <span id="Caption"></span></p>
</div>
</div>
<!-- End mainContent-->
<div id="footer">
<p class="copyright">©2009 Beaver Family Ministries. All Rights Reserved.</p>
<p class="credit"><a href="http://www.ncwebpros.com" title="NC Web Pros, Web Design and Development, Mint Hill, NC">Site Design by NC Web Pros</a></p>
</div>
</div> <!-- End Container Div-->
</body>
</html>
Internal.css :
@charset "UTF-8";
/* CSS Document */
body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#container {
width:943px;
padding:0;
margin:0 auto;
height:100%;
}
#header {
width:900px;
margin-top:0;
margin-left: auto;
margin-right:auto;
margin-bottom: 0;
padding:0;
}
#header img {
margin:0, auto;
border:none;
}
.module_title {
text-transform:capitalize;
color:#333;
}
/****** Top Navigation */
ul#topNav{
margin:0;
padding:0;
list-style-type:none;
width:auto;
position:relative;
display:block;
height:36px;
text-transform:uppercase;
font-size:70%;
font-weight:bold;
background:transparent url("../images/OFF.gif") repeat-x top left;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
border-bottom:4px solid #555555;
border-top:1px solid #919191;
}
ul#topNav li{
display:block;
float:left;
margin:0;
pading:0;}
ul#topNav li a{
display:block;
float:left;
color:#4a4a4a;
text-decoration:none;
padding:12px 20px 0 20px;
height:24px;
background:transparent url("../images/DIVIDER.gif") no-repeat top right;
}
ul#topNav li a:hover {
background:transparent url("../images/HOVER.gif") no-repeat top right;
}
/******* End Top Navigation */
#mainContent {
margin:0;
padding:0;
}
#photoMainContent {
background-color:#000;
width:900px;
margin:0 auto;
padding:0;
height:100%;
}
#internalMain {
float:left;
display:inline;
width: 680px;
background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
border:thin solid #666;
margin:10px 0px 10px 20px;
padding:10px;
text-align:left;
font-size:72%;
min-height:575px;
}
#internalMain img {
float:right;
display:inline;
margin:0;
padding:5px;
border:none;
}
#internalMain h3 {
margin-bottom:0;
color:#900;
font-style:italic;
}
#devotional {
float: right;
display:inline;
width: 190px;
background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
border:thin solid #666;
margin:10px 15px 10px 5px;
padding:0;
text-align:center;
font-style:italic;
min-height:275px;
}
#devotional img {
float:right;
display:inline;
margin:0;
padding:5px;
border:none;
}
#devotional h3 {
margin-bottom:0;
color:#900;
font-style:italic;
}
#lifesavers {
float: right;
display:inline;
width: 190px;
background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
border:thin solid #666;
margin:10px 15px 10px 5px;
padding:0;
text-align:center;
font-style:italic;
min-height:275px;
}
#lifesavers img {
float:right;
display:inline;
margin:0;
padding:5px;
border:none;
}
#lifesavers h3 {
margin-bottom:0;
color:#900;
font-style:italic;
}
#familyHistory {
float: right;
display:inline;
width: 190px;
background: transparent url(../images/module_bkgnd.gif) top left repeat-x;
border:thin solid #666;
margin:10px 15px 10px 5px;
padding:0;
text-align:center;
font-style:italic;
min-height:275px;
}
#familyHistory img {
float:right;
display:inline;
margin:0;
padding:5px;
border:none;
}
#familyHistory h3 {
margin-bottom:0;
color:#900;
font-style:italic;
}
.title {
text-transform:uppercase;
font-size:70%;
font-style: italic;
padding:5px 0 5px 5px;
margin:0;
border-bottom:thin solid #FFF;
}
.caption {
font-size:70%;
line-height: 120%;
padding:5px;
margin-top:0;
}
#footer {
clear:both;
background: transparent url(../images/footer_bkgnd.gif) top left repeat-x;
font-size:70%;
width: 900px;
padding:0;
margin:0 auto;
min-height: 50px;
}
.copyright {
float:left;
clear:both;
display:inline;
width:450px;
padding:0;
margin:0;
}
.credit {
text-align:right;
display:inline;
float:right;
width:250px;
padding:0;
margin:0 200px 0px 0px;
}
.credit a:link {
color:#333;
text-decoration: none;
}
.credit a:hover {
text-decoration:underline;
}
#bottomSection {
padding:0;
margin:0;
}
.book {
font-style: italic;
text-decoration: underline;
}
.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
.quote {
font-style: italic;
padding:20px;
text-align:justify;
}
#pic {
float:right;
display:inline;
clear:both;
display:block;
padding:5px;
}
.picLeft {
width:250px;
padding:5px;
margin:0;
text-align:left;
}
.picRight {
float:right;
padding:5px;
margin:0;
}
quotation {
display:block;
line-height:2em;
font-style:italic;
}
quote {
quotes: '"' '"';
}
quote:before {
content: open-quote;
}
quote:after {
content:close-quote;
}
quotee:before {
content: " (";
}
quotee:after {
content: ")";
}
/* Begin Photo Container */
.a, .a:visited {
color:#000;
}
#photoContainer {
position:relative;
width:600px;
height:700px;
background:#888;
border:1px solid #000;
margin:10px auto;
}
#photoContainer b {
font-weight:normal;
width:600px;
text-align:center;
position:absolute;
bottom:250px;
left:0;
color:#eee;
font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
letter-spacing:1px;
line-height:1.7em;
z-index:1;
}
a.gallery, a.gallery:visited {
display:inline;
color:#000;
text-decoration:none;
border:1px solid #000;
width:75px; height:75px;
float:left; margin:7px 21px;
position:relative;
cursor:default;
}
a.slidea {background:url(../images/Photo%20Page/thumbs/bpp01.jpg);}
a.slideb {background:url(../images/Photo%20Page/thumbs/bpp02.jpg);}
a.slidec {background:url(../images/Photo%20Page/thumbs/bpp03.jpg);}
a.slided {background:url(../images/Photo%20Page/thumbs/bpp04.jpg);}
a.slidee {background:url(../images/Photo%20Page/thumbs/bpp05.jpg);}
a.slidef {background:url(../images/Photo%20Page/thumbs/bpp06.jpg);}
a.slideg {background:url(../images/Photo%20Page/thumbs/bpp07.jpg);}
a.slideh {background:url(../images/Photo%20Page/thumbs/bpp08.jpg);}
a.slidei {background:url(../images/Photo%20Page/thumbs/bpp09.jpg);}
a.slidej {background:url(../images/Photo%20Page/thumbs/bpp10.jpg);}
a.gallery span {
visibility:hidden;
display:block;
position:absolute;
width:580px;
height:500px;
top:189px;
left:9px;
color:#000;
background:#ccc;
text-align:center;
border:1px solid #fff;
font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
letter-spacing:1px;
cursor:default;
}
a.slidea span {left:-13px; top:180px;}
a.slideb span {left:-132px; top:180px;}
a.slidec span {left:-251px; top:180px;}
a.slided span {left:-370px; top:180px;}
a.slidee span {left:-489px; top:180px;}
a.slidef span {left:-13px; top:89px;}
a.slideg span {left:-132px; top:89px;}
a.slideh span {left:-251px; top:89px;}
a.slidei span {left:-370px; top:89px;}
a.slidej span {left:-489px; top:89px;}
a.gallery:hover {
white-space:normal;
border:1px solid #fff;
z-index:100;
}
a.gallery:hover span {
visibility:visible;
z-index:100;
}
a.gallery:hover span img {
margin:10px;
border:1px solid #000;
position:relative;
z-index:100;
}
a.gallery:active, a.gallery:focus {
border:1px solid #c00;
z-index:10;
}
a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:10;}
a.gallery:active span img, a.gallery:focus span img {
border:1px solid #000;
position:relative;
margin:10px;
z-index:10;
}
/* End Photo Container */
ajax-slideshow.css:
*{
margin:0;
padding:0}
a:link,a:visited{
color:#333;
text-decoration:none
}
a:hover,a:visited:hover{
color:#000;
text-decoration:underline
}
a.inactive:link,a.inactive:visited{
color:#CECEB5
}
#Container{
margin:0 auto;
padding: 0;
position:relative;
width:894px;
height:100%;
background-color:#000;
border:3px solid #CECEB5;
overflow:hidden
}
#LoadContainer{
height:25%;
width:50%;
position:absolute;
top:40%;
left:25%;
text-align:center;
z-index:1
}
#PhotoContainer{
visibility:hidden
}
#CaptionBlock{
height:18px;
width:582px;
text-align:left;
margin:0 auto
}
#Caption{
color:#fff;
}
#License{
margin:0 auto;
padding-top:10px;
font-size:10px;
color:#666;
border-top:1px solid #CECEB5;
width:740px;
text-align:left;
line-height:1.4em;
}
#LinkContainer{
display:none;
position:absolute;
top:0;left:0;
height:200px;
width:200px;
z-index:100;
background:url(images/slideshow/start.gif) 50% 50% no-repeat
}
#PrevLink{
z-index:100;
position:absolute;
top:0%;
left:0%;
height:200px;
width:50%;
display:block
}
#NextLink{
z-index:100;
position:absolute;
top:0%;
left:50%;
height:200px;
width:50%;
display:block
}
#PrevLink:hover,#NextLink:hover{
text-decoration:none
}
#PrevLink:hover{
background:transparent url(images/slideshow/prev_rounded_sidebar2.gif) left 50% no-repeat
}
#NextLink:hover{
background:transparent url(images/slideshow/next_rounded_sidebar2.gif) right 50% no-repeat
}
#PrevLink span,#NextLink span{
display:none
}
img{
border:none
}
p{
font-size:11px;
padding:1em 0
}
#Wrapper{
margin:0 auto;
height:500px;
width:100%;
overflow:hidden;
position:relative
}
#Wrapper[id]{
display:table;
position:static
}
#InnerWrapper{
position:absolute;
top:50%;
left:0;
}
#InnerWrapper[id]{
display:table-cell;
vertical-align:middle;
position:static
}
#OuterContainer{
position:relative;
top:-50%
}
