PDA

View Full Version : Vertical centering in IE



scoop_hk
10-18-2007, 11:30 AM
1) Script Title: Swiss Army Slideshow IE vertical centering

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

3) Describe problem:
New problem is that the images no longer center vertically in their table cells - i thought they had but now that the page is fractionally longer they don't. The cells just stay the right height in FF, NN7, Safari but in IE6 & IE7 the cells are taller than they should be and the images cling to the top. I even changed the document type to see if that would help with a vertical float but no luck.

I have 4 slide shows on my index page - no buttons and no fade on the first image thanks to your previous wonderful help.

this is in the body same for each of the 4 slide shows:

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" height="420">
<tr height="210">
<td align="center" valign="middle" bgcolor="#650460" width="50%" height="210"><div align="center">
<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, 393, 210, 6000)
start_it(0);
</script>
</div>

this is in the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>The Learning Journey - Homepage</title>
<link href="css/tlji2.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">

/* All Styles Optional */

* {
font-family:arial;
font-size:10pt;
}
div#show3 {
background-color:#efefef;
width:140px;
margin:0 auto;
border:1px solid #444444;
}
div#show3 table td, div#show4 table td {
height:24px;
background-image:;
}
div#show4 table td {
background-image:;
}
div#show3 table input, div#show4 table input {
outline-style:none;
}
</style>
<!--[if IE]>
<style type="text/css">
div#show3 table td, div#show4 table td {
height:21px;
}
</style>
<![endif]-->

<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='';
var stopimg='';
var playimg='';
var nextimg='';

var slides=[]; //FIRST SLIDESHOW
//configure the below images and descriptions to your own.
slides[0] = ["images/main3/ELearning/001.jpg", ""];
slides[1] = ["images/main3/ELearning/002.jpg", ""];
slides[2] = ["images/main3/ELearning/003.jpg", ""];
slides[3] = ["images/main3/ELearning/004.jpg", ""];
slides[4] = ["images/main3/ELearning/005.jpg", ""];
slides[5] = ["images/main3/ELearning/006.jpg", ""];
slides[6] = ["images/main3/ELearning/007.jpg", ""];
slides.no_controls=1;
slides.no_added_linebreaks=1;
slides.nofade=1;
slides.manual_start=1;
slides.pause=1; //use for pause onmouseover
//above slide show uses only the defaults

var slides2=[]; //SECOND SLIDESHOW
//configure the below images and descriptions to your own.
slides2[0] = ["images/main3/gameplay/001.jpg", ""];
slides2[1] = ["images/main3/gameplay/002.jpg", ""];
slides2[2] = ["images/main3/gameplay/003.jpg", ""];
//optional properties for these images:
slides2.no_controls=1;
slides2.no_added_linebreaks=1;
slides2.nofade=1;
slides2.manual_start=1;
slides2.pause=1; //use for pause onmouseover

var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/main3/puzzleplay/001.jpg","", "", "", ""];
slides3[1] = ["images/main3/puzzleplay/002.jpg", ""];
slides3[2] = ["images/main3/puzzleplay/003.jpg", "", ""];
//optional properties for these images:
slides3.no_controls=1;
slides3.no_added_linebreaks=1;
slides3.nofade=1;
slides3.manual_start=1;
slides3.pause=1; //use for pause onmouseover


var slides4=[]; //FOURTH SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides4[0] = ["images/main3/inspirational/001.jpg", ""];
slides4[1] = ["images/main3/inspirational/002.jpg", ""];
slides4[2] = ["images/main3/inspirational/003.jpg", ""];
slides4[3] = ["images/main3/inspirational/004.jpg", ""];
//optional properties for these images:
slides4.no_controls=1;
slides4.no_added_linebreaks=1;
slides4.nofade=1;
slides4.manual_start=1;
slides4.pause=1; //use for pause onmouseover

can it be controlled in here?:
//Notes:
//slides#.target will set a target for a slide group, will be overridden by slides#[#][3], if present
//slides#.specs will set new window specifications for a slide group, will be overridden by slides#[#][4], if present
//slides#.fadecolor will set fading images background color, defaults to white
//slides#.no_controls will set a slide show with no controls
//slides#.random will set a random slide sequence on each page load
//slides#.delay=3000 will set miliseconds delay between slides for a given show, may also be set in the call as the last parameter
//slides#.jumpto=1 will display added controls to jump to a particular image by its number
//slides#.no_added_linebreaks=1; use for no added line breaks in formatting of texts and controls

//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;"


function start_it(num,d){
if(!d){
setTimeout(function(){start_it(num,1);},iss[num].delay);
return;
}
if(document.createElement){
if (typeof document.getElementById('canvas'+num+'_0').style.opacity=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.opacity=.99;
document.getElementById('canvas'+num+'_1').style.opacity=.1;
}
else if(typeof document.getElementById('canvas'+num+'_0').style.filter=='string'){
iss[num].fade=1;
document.getElementById('canvas'+num+'_0').style.filter="alpha(opacity=100)";
document.getElementById('canvas'+num+'_1').style.filter="alpha(opacity=10)";
}
}
iss[num].gostop();

thank you! client thinks i should be adjusting the image size! which would throw the entire page balance off.... help.... thank you!

jscheuer1
10-18-2007, 09:51 PM
It's much easier for me to figure this sort of stuff out if I have a link to the live page. However, I can tell you that the slides will already center themselves vertically and horizontally within the area allotted for them if you simply specify the width as the width of the widest image and the height as the height of the tallest image here:


new inter_slide(slides, 393, 210, 6000)

Putting an extra table around it is probably just confusing the browser. One other thing, with this and most modern scripts, use a valid URL DOCTYPE, like:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

or stricter. The DOCTYPE you have has no URL and so throws IE into quirks mode or at least, into a very low compliance mode.

scoop_hk
10-19-2007, 04:36 AM
changing the doc type didn't help.
IE is still adding to the cell height.

http://www.creativeartlink.com/tlji/index.html

may i send you the passwords offlist doesn't seem fair to password this for my client and then publish his passwords.

sorry i didn't have instant notification checked off before - good thing i looked!

thank you for your great response time!

jscheuer1
10-19-2007, 04:52 AM
may i send you the passwords offlist doesn't seem fair to password this for my client and then publish his passwords.

Sure:

http://www.dynamicdrive.com/forums/private.php?do=newpm&u=2033

jscheuer1
10-19-2007, 05:17 AM
It's often so easy when I can see the page. Just add:


slides.no_descriptions=1;

to each show, ex:


var slides3=[]; //THIRD SLIDESHOW
//configure the below images and descriptions to your own, note optional links, target and window specifications.
slides3[0] = ["images/main3/puzzleplay/001.jpg","", "", "", ""];
slides3[1] = ["images/main3/puzzleplay/002.jpg", ""];
slides3[2] = ["images/main3/puzzleplay/003.jpg", "", ""];
//optional properties for these images:
slides3.no_controls=1;
slides3.no_added_linebreaks=1;
slides3.nofade=1;
slides3.manual_start=1;
slides3.pause=1; //use for pause onmouseover
slides3.no_descriptions=1;

Notes: I've actually run into something similar before. What happens is that in IE, for some reason, it leaves room for the descriptions unless you specifically tell it not to.

scoop_hk
10-19-2007, 05:20 AM
Thank you John!
You are the BEST!