I am having two issues. The first is that the when the content (which is just images) transition the old image fades out, but shifts down and to the right several hundred pixels as it does so. I would like it to stay in its displayed location during the transition.

The second issue is that the "off" controls are being clipped by the content image. I would like to have them overlay the content, in the same way the the "on" control is currently working.

An example of the problem I am having can be viewed at http://community.logicoresolutions.com/. Here is the Style.css for my style template:

#%parentId% {margin: 0; padding: 0;}
#%parentId% #conts{padding-bottom: 0;}
#%parentId% #conts #conts-top{ display: none;}
#%parentId% .rotatorWrapper{width: 866px;}
#%parentId% .rotator {width: 639px; float: left; margin: 0; line-height: 0;}
#%parentId% .rotator p{margin: 0; line-height: 0;}
#%parentId% #controls {float: left; width: 227px;  padding: 0; margin: 0; letter-spacing: 0px; position: relative; z-index: 1; font-weight: bold; font-family: Helvetica;}
#%parentId% .rotatorControlsWrapper{clear: none;}

#%parentId% .rotatorPositionSelected {position: relative; z-index: 1;}

#%parentId% .rotatorContentWrapper{width: 639px;}

#%parentId% .rotatorThumbnailWrapper{padding: 0;}
#%parentId% #rotatorContentDescriptionWrapper {padding: 0 !important; font-size: 0;}
#%parentId% .rotatorContentTitleWrapper { padding: 0;}
#%parentId% .rotatorContentDescription { margin: 0; width: 639px;}

#%parentId% .rotatorContent {width: 639px; margin-top: -19px;}

#%parentId% .rotatorDescription{width: 639px; margin-right: 0 !important;}

#%parentId% .rotatorControlsWrapper .rotatorPositionsWrapper .rotatorPosition{background: url(images/ButtonOff.gif) no-repeat; height: 53px; margin-left: -13px; padding-left: 0px; line-height: 53px;}
#%parentId% .rotatorControlsWrapper .rotatorPositionsWrapper .rotatorPositionSelected {background: url(images/ButtonOn.gif) no-repeat; height: 53px; margin-left: -13px; padding-left: 0px; line-height: 53px;}
#%parentId% .rotatorPositionSelected div { color: #fff !important; font-family: Helvetica; font-size: 10pt; }
#%parentId% .rotatorPositionsWrapper div { color: #fff !important; font-family: Helvetica; font-size: 10pt; margin-bottom: 0; }

Thanks,

-Chris

Brian,

Thanks for the reply. The first issue insn't really a big deal. I didn't even notice it for quite some time.

I also figured that the second issue was related to the z-index. So I played around with it some more and got it to work. The strange thing is that all I actually had to do was explicitly set "position:relative" for  ".rotatorPositionsWrapper div" and thus apparently negate the preset z-index.

-Chris