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/dynamici...iongallery.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"> <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/s...ead.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:

Code:

<!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:

Code:

#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:

Code:

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

To be used, these must be:

Code:

width:800px; height:65px

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

Don't confuse these with attributes:

Code:

<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:

Code:

<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.

Thread: Cmotion Image gallery

Thread Tools

Search Thread

Cmotion Image gallery

Bookmarks

Bookmarks

Posting Permissions