CMotion Gallery padding?

[metblack85]

I'm using the CMotion Gallery for my company's website. How can I space or padding in between the gallery objects? Increasing the image border size didn't do anything, nor did adding padding to the css file for the img and img hover items.

[jscheuer1]

In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

Anyways, aren't you actually using:

http://www.dynamicdrive.com/dynamici...wler/index.htm

If so, do:

.marquee0 img {
margin: 0 5px;
}

Adjust the 5px as desired.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

[metblack85]

No, I am definitely using CMotion Gallery.
Where can I add some padding in between my gallery images?

<div style="text-align: center;">
  <link href="http://cwby3.as3gs.servertrust.com/v/vspfiles/js/gallerystyle.css" type="text/css" rel="stylesheet" />
<!--Do not edit IE conditional style below-->
<!--[if gte IE 5.5]&gt;&lt;style type="text/css"&gt;#motioncontainer {width:expression(Math.min(this.offsetWidth, maxwidth)+'px');}&lt;/style&gt;&lt;![endif]-->
<!--End Conditional Style-->

  <script src="http://cwby3.as3gs.servertrust.com/v/vspfiles/js/motiongallery.js" type="text/javascript">
//<![CDATA[/************************************************ CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts* This notice must stay intact for legal use* Modified by Jscheuer1 for autowidth and optional starting positions***********************************************///]]>
</script><br />
  <br />
  </div>
<div align="center">
  <div style="overflow: hidden; position: relative; width: 1000px; height: 250px;" id="motioncontainer">
    <div style="position: absolute; top: 0pt; white-space: nowrap;" id="motiongallery_0">
      <nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img1.jpg" /></a><a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img2.jpg" /></a><a href="http://www.dynamicdrive.com">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img3.jpg" /></a><a href="#">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img4.jpg" /></a><a href="#">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img5.jpg" /></a><a href="#">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img6.jpg" /></a><a href="#">
          <img border="2" src="http://cwby3.as3gs.servertrust.com/v/vspfiles/images/img7.jpg" /></a></nobr></div>
    </div></div>

[jscheuer1]

In your stylesheet put:

#motioncontainer img {
 margin:0 5px;
}

Adjust the 5px as desired.

If you want more help, I really need a link to the page.

BTW, from the code in your post, this:

<!--Do not edit IE conditional style below-->
<!--[if gte IE 5.5]&gt;&lt;style type="text/css"&gt;#motioncontainer {width:expression(Math.min(this.offsetWidth, maxwidth)+'px');}&lt;/style&gt;&lt;![endif]-->
<!--End Conditional Style-->

Is garbage, it's been converted to ordinary text with entities. It should be replaced with the original code. Or if it was causing a problem and you don't want it, just get rid of it.

[metblack85]

http://cwby3.as3gs.servertrust.com/default.asp

Basically, I adjusted the css and i didnt see it reflected on the site

[jscheuer1]

I don't see it in your styles, put it here (in gallerystyle.css):

/* Gallery Styles */

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

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}

#motioncontainer img {
 margin:0 5px;
}

/* End Gallery Styles */

Scroll to the bottom of the code block.

[metblack85]

I added it, and still the margin between the items has not changed.
I'm not sure what, but something is preventing it from moving

[jscheuer1]

Nope, it's nowhere in your styles.

[metblack85]

Ok, it was in my CSS once I refreshed it (strange...) and now the padding works perfectly, however in IE, the script is starting 1/2 way across the screen, and then upon mouseover it re-calibrates itself. Do you know how I can fix the strange occurence in IE and get it to function the same way it does in Firefox?

http://cwby3.as3gs.servertrust.com/

Thanks John, you've already helped me a lot.

[jscheuer1]

<div align="center"><div align="left" id="motioncontainer" style="overflow: hidden; position: relative; width: 1000px; height: 250px;">