CSS positioning in Featured content slider

[Geezer D]

1) Script Title: http://www.dynamicdrive.com/dynamici...tentslider.htm
2) Script URL (on DD): Featured content slider v2
3) Describe problem:

I got this to work on IE7 fine, but Firefox shoves the pics over to the left for some reason (but not the pagination).
Must be a positioning issue (?), but I've been messing with it for awhile, and haven't solved it.

Can anyone tell me what to change, that will make it position centered in both browsers?

It's inside of #gallery, which itself is inside #rightcol.

I may be able to get rid of #gallery if needed.

Thanks.

Site: http://www.geezerd.com

http://geezerd.com/main.css is the whole css, but I put the most relvant sections below:

body {
	background: url('images/bg1.jpg') black top repeat-x fixed;
	margin: 0px 0px 0px 1px;
	font-family: "Trebuchet MS",Helvetica, sans serif;
	font-size: 13px;
	color: #ccc;
	text-align: left;
}

#container {
	position:relative;  
	width: 100%;
	top: 120px;
}

#rightcol {  
	position:absolute;
	top:30px;
	right:0;
	width: 65%;
}

#gallery {
	height: auto;
	font-size: 14px;
	text-align:center;
	vertical-align: middle;
}

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
width: 100%; /*width of featured content slider*/
height: 450px;
}

.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
background-image: url('images/bg4pics.jpg');
width: 100%; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
	width: 100%; /*Width of pagination DIV. equals Content Slider's width, remember left/right paddings!*/
	height:auto;
	background: url( ) no-repeat bottom center;
	padding: 5px 0 0 0;
}



#leftcol { 
	background: url('images/whitebg.png') repeat; 
	position:absolute;
	top:0px;
	left:0px;
	width: 208px;
	margin: 0 0 0 100px;
	padding:5px;
}

[ddadmin]

You can targeting the ".contentdiv" class specifically in your CSS to get things to center align, such as:

.contentdiv{
text-align: center;
}

BTW, please note that your page is currently in violation of our usage terms, since the credit notice doesn't appear inline on the page. Please reinstate the credit notice: http://www.dynamicdrive.com/notice.htm

[Geezer D]

I pasted that back in, sorry, I thought it was only necessary in the js file.

OK, well, I tried the text-align:center, no go.

I tried that earlier, on everything, it doesn't fix the problem with Firefox not centering it.

Any other ideas I could try?

Thanks

[Geezer D]

OK, I got it. 100% width worked.

Now I've found another problem, hahah.

In Firefox, the images don't fade out.

They all just fade in and stack up (only matters if images are different sizes, which mine are, of course....

I had put a background image in there, but realized when you scroll, it doesnt match the gradient background anymore, and looked like crap, so I hads to take it out.

[ddadmin]

The slides will appear overlapped if the ".contentdiv" DIV isn't set to be wide enough to accommodate the widest image in your slides. For example, one of your images is 450px I see . This means your Featured Content Slider should at least be set to be as wide or wider than that in the CSS:

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: white;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Note the lines in red that need to be changed.

[Geezer D]

It's positioned on top of itself fine, width isn't the problem.
You can tell because there's no problem to the left or right.

It's actually not working in IE, either.

Probably there is not an actual fade "out", it just appears that way
because the next picture fades in and covers the last one.

The original version actually got rid of the last content div when the next one came up,
which made it possible to have it with different size images, and text, too.

This one doesn't do that, which is too bad.

[ddadmin]

The original version actually got rid of the last content div when the next one came up,
which made it possible to have it with different size images, and text, too.

This one doesn't do that, which is too bad.

The old version did a straightforward hiding of the previous content before showing the current, which also explains why the fade effect in that version doesn't fade out the previous content when fading in the current. In the new version, the two contents are stacked together.

It's probably possible to modify v2.0 to truly hide the previous content in some way. I'll look at possibly implementing it the next time the script is updated.

[Geezer D]

Thanks for your time, my friend. Appreciated.