Results 1 to 9 of 9

Thread: Cmotion Image gallery

  1. #1
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Cmotion Image gallery

    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">&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">
    Last edited by DaveX; 04-01-2007 at 01:17 AM.

  2. #2
    Join Date
    Mar 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Get rid of:

    align="center"
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'm not sure what you mean. How about a link to your page?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Feb 2007
    Posts
    52
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •