IE cropping problems in centred div [Archive]

bakunin_the_cat

01-04-2008, 01:08 PM

Hi there,
Hope you can help. Is there an easy way of using the drop-in slideshow inside a fixed width centred div? It works fine in FF but in IE the images are cropped. I would prefer not to have to do much hacking around in Javascript.

The code in its basic form looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="js/dropinslideshow.js">

/***********************************************
* Drop-in Slideshow Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<title>The Stag at Redhill : About Us</title>
</head><body>
<div style="width:800px;text-align:center"><script>
var myimages = new Array();
myimages[0] = ['images/userimages/139125.jpg', '', ''];
myimages[1] = ['images/userimages/225555.jpg', '', ''];
//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 400, 300, 3000);
</script></div>
</body></html>

jscheuer1

01-04-2008, 02:09 PM

IE often has problems interpreting the concept of center where nested positioned divisions (as created by this and many scripts) are concerned. You can most likely get the same effect across browsers using this technique - get rid of the 'text-align:center' (red):

<div style="width:800px;text-align:center"><script>
var myimages = new Array();
myimages[0] = ['images/userimages/139125.jpg', '', ''];
myimages[1] = ['images/userimages/225555.jpg', '', ''];
//Create new drop-in slideshow
//Syntax: new dropinslideshow(image_array, slideshow_width, slideshow_height, delay_before_rotation)
new dropinslideshow(myimages, 400, 300, 3000);
</script></div>

Put this in the head of the page:

<style type="text/css">
#_dropslide1 div {
text-align:center;
}
</style>

Note: If taking advantage of the multiple use capability of this script, subsequent shows on a page will use #_dropslide2, #_dropslide3, etc.