View Full Version : different placement in FF & ie7

10-10-2007, 08:00 PM
1) Script Title: Swiss Army slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem: I love this script and I have got it working in ie7 by putting it in a div and then adding borders to the div like a pictureframe.
When I try to view it in FF I run into a problem. The slideshow slides down by about 30px and leaves the div frame where it was. The effect is to have a 30px band of background at the top of the div frame with the slideshow overlapping and covering the div border by the same amount at the bottom.
Why the difference between the 2 browsers? There is nothing complicated in the code or the css that I can see. The slideshow is in a div with 4 borders???
Many thanks for any advice.

10-10-2007, 08:28 PM
please provide a link to the page or post the code encapsulating in [code] tags

and read http://www.dynamicdrive.com/forums/showthread.php?t=24866

10-12-2007, 11:25 AM
Sorry Boogyman, I should have added the code. I am new at this!!

Here is the code and the CSS:-

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" contents="French Odyssey Holidays in the lovely Dordogne region of SW France " />
<meta name="keywords" content="French Odyssey, French Property Magazine, property, Holidays, Dordogne, Aquitaine, food, wine, gourmet, Executive, France, SW France, Bergerac, Lalinde, Badefols sur Dordogne
Residential property, Holiday Home, Holiday Homes, Gites, Property for Sale, Buying Property, Vacation, vacations, Le Pech Haut, France"/>
<meta NAME="robots" content="index,follow,all">
<meta NAME="revisit-after" CONTENT="31">

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

<script type="text/javascript">

//If using image buttons as controls, Set image buttons' image preload here true
//(use false for no preloading and for when using no image buttons as controls):
var preload_ctrl_images=false;

//And configure the image buttons' images here:
var previmg='left.gif';
var stopimg='stop.gif';
var playimg='play.gif';
var nextimg='right.gif';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["infinity_pool.jpg", "Swim into Infinity"];
slides[1] = ["lalinde.jpg", "Lalinde market"];
slides[2] = ["palm_by_the_pool.jpg", "Palm by the Pool"];
slides[3] = ["spa11.jpg", "Star gaze from the Spa"];
slides[4] = ["view_from_lounge.jpg", "View from the Lounge"];

slides.fadecolor ="transparent";
slides.desc_prefix='<b>French Odyssey: <\/b>';
//use below to create a customized onclick event for linked images in a given show:
//slides#.onclick="window.open(this.href,this.target,'top=0, left=0, width='+screen.availWidth+', height='+screen.availHeight);return false;"


<script src="swissarmy.js" type="text/javascript">

* Swiss Army Image slide show script - John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code




<div id="container" >

<div id="slideshow">

<script type="text/javascript">
//Notes on Parameters: The only required parameter is the slides_array_name. If Width is used, so must Height.
//Interval is optional too. It is always last, either fourth after Width and Height or second after Slides_array_name.
//Usage: new inter_slide(Slides_array_name, Width, Height, Interval)
new inter_slide(slides,300,225,2500)
</div><!--end of slideshow div -->

</div><!--end of container div-->



body {
background-image: url(images/background.jpg);
background-repeat: repeat-x;

#container {
width: 765px;
height: 550px;
background-image: url(images/woodlandfaded.jpg);
background-repeat: no-repeat;
padding: 1px;

border-right: green ridge 20px;
border-bottom: green ridge 20px;
border-left: #d8d800 ridge 20px;
border-top: #d8d800 ridge 20px;

margin-top: 20px;
margin-left: auto;
margin-right: auto;

#slideshow {
width: 300px;
height: 225px;
margin-top: 120px;
margin-bottom: none;
margin-left: auto;
margin-right: auto;
border-right: green ridge 13px;
border-bottom: green ridge 16px;
border-left:#d8d800 ridge 13px;
border-top: #d8d800 ridge 13px;

To repeat the problem:-
Looks OK in IE7 but in FF the slides slip down over the slideshow border by about 30px.
Many thanks