Log in

View Full Version : Cmotion Image gallery


DaveX
03-31-2007, 11:12 PM
1) Script Title: CMotion Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem: This script works great but I'm having one issue. It looks great in FF and Safari but in IE it shows up all the way to the left. I believe I have it set to center in the CSS. This is how the code looks:

#motioncontainer {
margin:0 auto; /* Uncomment this line if you wish to center the gallery on page */

Is this correct? I'm sure I'm missing something obvious as usual. Any ideas?

Here's where I think the problem may be:

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="990" id="AutoNumber1" bordercolorlight="#000000" bordercolordark="#000000" bordercolor="#000000" bgcolor="#333333">
<tr>
<td width="990" colspan="2" height="30" bordercolor="#000000" bgcolor="#333333" align="right">
<img border="0" src="images/logo.jpg" width="309" height="21"></td>
</tr>
<tr>
<td width="990" colspan="2" height="480" bordercolor="#000000" bgcolor="#333333">
<p align="center">&nbsp;<div id="loadarea" style="width: 990px"></div></td>
</tr>
<tr>
<td align="left" height="26" bgcolor="#333333" width="495">
<img border="0" src="images/mail.jpg" width="275" height="14"></td>
<td align="right" height="26" bgcolor="#333333" width="495">
<img border="0" src="images/telephone.jpg" width="188" height="13"></td>
</tr>
<tr>
<td width="990" colspan="2" height="70" bgcolor="#333333">
<div id="motioncontainer" style="position:relative;overflow:hidden; width:800; height:65">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap; width:1700; height:58">
Daredee
04-01-2007, 03:32 AM
http://www.dynamicdrive.com/forums/showthread.php?t=4555
jscheuer1
04-01-2007, 04:12 AM
For IE to utilize that style code for center, #motioncontainer must have a width and you must use at least a minimal DOCTYPE for the page, ex:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
DaveX
04-01-2007, 05:11 PM
I believe I have a width for the motion container. I added a center align as well:

<td width="990" colspan="2" align="center" height="70" bgcolor="#333333">
<div id="motioncontainer" style="position:relative;overflow:hidden; width:800; height:65">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap; width:1700; height:58">

I also added a DOCTYPE (which I'm just learning about).

Anyway, it has centered but the only issue is that the container appears shorter in IE...
jscheuer1
04-01-2007, 05:25 PM
Get rid of:

align="center"
DaveX
04-01-2007, 06:20 PM
Got rid of it and everything centered. The call that I have it in blows way up though. Is there a variable I'm missing in the code for the container? The cell is set at a specific height but I'm wondering if the container is forcing it larger? Thanks for your patience!
jscheuer1
04-01-2007, 06:27 PM
I'm not sure what you mean. How about a link to your page?
DaveX
04-01-2007, 09:16 PM
Oops! I thought I had posted one above. Here it is:

http://www.automatwe bdesign.com/jasonevans/temp.htm

The bottom cell should be a little taller than the displayed thumbs which is how it displayed before I put in the DOCTYPE...
jscheuer1
04-02-2007, 06:23 AM
OK, the layout is a bit odd but, that's really your choice. However, I can tell you that with a DOCTYPE in style (not in attributes) if you mean pixels, you must specify them.

Style examples:


#motioncontainer {
margin:0 auto; /* Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 350px; /* Set to gallery height */
}

which was OK but the height seems excessive and here, inline on the page:


<div id="motioncontainer" style="position:relative;overflow:hidden; width:800; height:65">

To be used, these must be:


width:800px; height:65px

As written on your demo page, the net effect is width:50%;height: 350px;

Don't confuse these with attributes:


<img border="0" src="images/Page3_50.jpg" width="65" height="50">

which assume pixels if % is not specified and which should never have the px added.

One other thing, you have a bunch tags for two images which don't exist on the server:



<img border="0" src="images/Page_14Thumb_50.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_50.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_50.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">

<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45"> </nobr>
<img border="0" src="images/Page_14Thumb_45.jpg" width="65" height="45">

These should all be removed but, keep the closing </nobr> tag.