[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 483: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/bbcode.php on line 112: preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4284: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4286: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4287: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
[phpBB Debug] PHP Notice: in file /includes/functions.php on line 4288: Cannot modify header information - headers already sent by (output started at /includes/functions.php:3493)
www.dhtmlgoodies.com • View topic - Image slideshow with vertical filmstrip - IE/Firefox issues
Advertisement

Image slideshow with vertical filmstrip - IE/Firefox issues

Moderators: Calcifer, slothy

Image slideshow with vertical filmstrip - IE/Firefox issues

Postby docaoimh » Thu Jul 20, 2006 11:40 pm

I'm trying to add the images slideshow, which is really nifty, to a website I'm doing at the moment. However, I've come up with a bit of a problem. In IE it looks fine (which is usually not the case!) and in Firefox it gets a bit messed up. What happens is the footer expands completely to fill the content div and cover the picture in Firefox but it works fine in IE. Without text in content div the content div does not appear (should be white backgroud) in Firefox anyway. Any suggestions would be much appreciated. My tinkering has only got me so far.

The site is but the gallery isn't up yet. It's just a list of pictures which is pretty lame. :?

The complete CSS code is:

body {
font: .8em/1.8em verdana, arial, sans-serif;
background-color: #006FF0;
margin-left: 70px;
margin-right: 70px;
margin-top: 4px;
margin-bottom: 4px;
padding: 0;
}
#content {
border: 0 1px 1px 1px solid #ffffff;
padding: 10px 5px 6px 5px;
background-color: #FFFFFF;
}

#content h1 {
font-size: 1.3em;
color: #85a0f6;
background-color: transparent;
}

#content h2 {
font: 1.2em bold;
color: #002FAF;
background-color: transparent;
}

#content p:first-letter {
font-size: 1.5em;
padding: 0.1em;
color: #000000;
vertical-align: middle;
}

#content p::first-child {
margin-left: 2em;
}

#content img {
border: none;
padding: 4px;
float: none;
}

#content img.floatRight {
position: relative;
float: right;
}

#content img.floatLeft {
position: relative;
float: left;
}

#banner
{
height: 120px;
background-color: #F9F8AC;

margin-bottom: -34px; /* Moves the navigation menu up into the banner */
background-image: url(../images/gael2.jpg);
background-repeat: no-repeat;
background-position: top center;

}

#footer {
position: relative;
bottom: 0;
top: 0;
width: 100%;
border-top: 1px dotted #AAAAAA;
background-color: #CCCCCC;
color: #626262;
font-size: 70%;
text-align: center;
height: 20px;
}

#footer p {
margin: 0.5em 0 1em 2em;
}


ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 33px;
border-bottom: 1px solid #000000;
font: bold 11px verdana, arial, sans-serif;
}

ul#tabnav li {
float: left;
height: 29px;
background-color: #F9F8AC;
color: #000000;
margin: 2px 2px 0 2px;
border: 2px solid #000000;
border-bottom: none;
}

ul#tabnav a:link, ul#tabnav a:visited {
display: block;
color: #000000;
background-color: transparent;
text-decoration: none;
padding: 4px;
padding-bottom: 12px; /* This enabled me to make the hover cover the full title box */
}

ul#tabnav a:hover {
background-color: #33CCFF; /*#006699; /*#F4869C;*/
color: #000000;
}

body#ind li.ind, body#bground li.bground, body#services li.services, body#radio li.radio, body#links li.links, body#contact li.contact, body#pictures li.pictures {
border-bottom: 1px solid #ffffff;
color: #ffffff;
background-color: #ffffff;
}

body#index li.ind a:link, body#ind li.ind a:visited,
body#bground li.bground a:link, body#bground li.bground a:visited,
body#services li.services a:link, body#services li.services a:visited,
body#radio li.radio a:link, body#radio li.radio a:visited,
body#links li.links a:link, body#links li.links a:visited,
body#contact li.contact a:link, body#contact li.contact a:visited,
body#pictures li.pictures a:link, body#pictures li.pictures a:visited
{
color: #000000;
background-color: #ffffff; /*#85A0F6*/;
}

#translate {
position:absolute;
top: 126px;
right: 75px;
border: 1px;
}

#translate a:link, #translate a:visited {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color: #f9f8ac; /*#A62020;*/
background-color: #0C097D; /*#85a0f6; /*#FCE6EA;*/
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}

#translate a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

/* START OF IMAGE VERTICAL SLIDESHOW */
#dhtmlgoodies_slideshow{
width:830px; /* Total width of slideshow */
margin-top: 20px; /* Added to move the picture div down a bit to make room for the translate div */
}

#previewPane{
border:1px solid #000;
margin-right:14px;
text-align:center;
vertical-align:middle;
padding-top:30px;


/* CSS HACK */
height: 452px; /* IE 5.x */
height/* */:/**/452px; /* Other browsers was 420 */
height: /*was 420*/452px;
width:680px;
float:left;
}

#waitMessage{
display:none;
position:absolute;
left:350px;
top:350px;
background-color:#FFF;
border:3px double #000;
padding:4px;
color:#555;
font-size:0.9em;
font-family:arial;
}

#galleryContainer{ /* Big Div surrounding up image, list of images and down image */
float:left; /* Floating */

/* CSS HACK */
height: 454px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
height/* */:/**/438px; /* Other browsers */
height: /**/438px;

/* CSS HACK */
width: 124px; /* IE 5.x - 120 px + 2 px for borders and 2px for padding*/
width/* */:/**/124px; /* Other browsers */
width: /**/124px;

border:1px solid #000; /* Black border */
padding:1px; /* A little space between the black border and the content inside */

}
#galleryContainer #arrow_down{ /* Arrow down image */
height:35px;
}
#galleryContainer #arrow_up{
height:35px; /* Arrow up image */
}

#theImages{ /* DIV where the images are located */
position:relative;
overflow:hidden;
height:448px; /* Height of boxes for the images */
}
#theImages div{
position:relative; /* Don't change this */
height:1500px; /* Higher than total height of thumbnails */

}
#theImages img{
border:0px; /* No border */
filter:alpha(opacity=50); /* Transparency - IE */
opacity:0.5; /* Transparency - Firefox */
padding-top:1px; /* Space between images */
}
#previewPane #largeImageCaption{ /* CSS styling of image caption below large image */
font-style:italic;
text-align:center;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font to use */
font-size:0.9em;
}
#theImages .imageCaption{
display:none;
}

********************************************************
********************************************************

The HTML code is:


<!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">
<head>
<title>Gael Taca Corcaigh - Pictiúirí</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/gaeltaca.css" />
<script type="text/javascript" src="js/image-slideshow-vertical.js">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/


</script>

</head>
<body id="pictures">
<div id="banner"><a href="index.html"></a></div>
<ul id="tabnav">
<li class="ind"><a href="index.html">Baile</a></li>
<li class="bground"><a href="culra.html">Cúlra</a></li>
<li class="services"><a href="seirbhisi.html">Seirbhisi</a></li>
<li class="radio"><a href="raidio.html">Raidió</a></li>
<li class="links"><a href="nasc.html">Nascanna</a></li>
<li class="contact"><a href="teagmhail.html">Teagmháil</a></li>
<li class="pictures"><a href="pictiuiri.html">Pictiuiri</a></li>
</ul>

<div id="content">
<div id="translate"><a href="en/pictures.html">English</a></div>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="images/image1_big.jpg" />
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_up"><img src="images/arrow-up.gif" id="arrow_up_image" /></div>

<div id="theImages">
<div>
<a href="#" onclick="showPreview('images/DSCF0129.jpg','1');return false"><img src="images/DSCF0129_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0261.jpg','2');return false"><img src="images/DSCF0261_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0264.jpg','3');return false"><img src="images/DSCF0264_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0277.jpg','4');return false"><img src="images/DSCF0277_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0281.jpg','5');return false"><img src="images/DSCF0281_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0282.jpg','6');return false"><img src="images/DSCF0282_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0289.jpg','7');return false"><img src="images/DSCF0289_t.jpg" /></a>
<a href="#" onclick="showPreview('images/DSCF0302.jpg','8');return false"><img src="images/DSCF0302_t.jpg" /></a>
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>

<div id="slideEnd"></div>
</div>

</div>
<div id="arrow_down"><img src="images/arrow-down.gif" id="arrow_down_image" /></div>
</div>
</div>

</div>

</body>
</html>
docaoimh
 
Posts: 4
Joined: Thu Jul 20, 2006 11:20 pm
Location: Cork

Postby Batalf » Fri Jul 21, 2006 2:26 am

Batalf
Site Admin
 
Posts: 2160
Joined: Sat Oct 22, 2005 9:38 pm

Doctype

Postby docaoimh » Fri Jul 21, 2006 3:00 pm

I'll try that this evening and hopefully it'll make a difference. Thanks.
docaoimh
 
Posts: 4
Joined: Thu Jul 20, 2006 11:20 pm
Location: Cork

Header change

Postby docaoimh » Sun Jul 23, 2006 9:16 am

docaoimh
 
Posts: 4
Joined: Thu Jul 20, 2006 11:20 pm
Location: Cork

Problem sorted

Postby docaoimh » Thu Jul 27, 2006 11:20 am

Just to let you know, I worked around the issue. You can see it in action at . There are still some anomalies but I'll live with them. In IE the background for the pictures is white but it's blue in Firefox, i.e. the colour of the body. The width of the page needs tweaking as it seems to change every now and again. Also, on the English version the down arrow disappears. I must have left out some code somewhere but it's just bizarre.

Keep the goodies coming :)
docaoimh
 
Posts: 4
Joined: Thu Jul 20, 2006 11:20 pm
Location: Cork


Return to Gallery script questions

Who is online

Users browsing this forum: No registered users and 2 guests

cron