Log in

View Full Version : IE Positioning Bug with Ultimate Slideshow


BradBlog
12-24-2007, 11:40 PM
1) Script Title:
Ultimate Image Fade Slideshow v1.51

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem:

I’ve been using it without problem for months, but now I’ve reformatted my blog a bit to set a standard width for the html elements of the page at 980px, in a centered block on the page. That centered block is the BODY div.

The slideshow should appear in the right sidebar, and has always worked as expected until I’ve now set the BODY To 980px, and used:

margin-left: auto;
margin-right: auto;

…as part of the div, in order to center the body in the browser window, no matter how large the browser window is.

Unfortunately, I’ve tried just about every variation on those, and text-align: center; and various position and float properties, etc., but no matter what I do, everytime the slideshow is placed in the CORRECT location when the page renders, but when then resizing the IE window around it, the slideshow stays in the same left position, while the rest of the centered body stuff moves appropriately.

This ONLY happens in IE (7, in this case, haven’t tested it on earlier), and it all seems to work fine, as expected in Firefox. Going NUTS trying to figure out what the hell is going wrong here!

A sample of the problem can be seen on my workpage at:
http://test.bradblog.com/?p=4814

While the previous, still live, problem-free version can be seen on any page at http://www.BradBlog.com

Can you help? Would be the best Xmas present I could get at this point, after 3 days of banging my head on this!

Brad
jscheuer1
12-25-2007, 07:02 AM
First off, 980 won't center at 800x600. You might want to look into a more fluid design.

There are a number of errors in your stylesheet:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Ftest.bradblog.com%2Fwp-content%2Fthemes%2Ftiga2%2Fstyle.css

Aside from those, the very thing that you describe in your post is a bad idea. Leave the body alone for the most part. You can set font, color, background, margin, and padding for it. For anything else, such as the width, and to center content, use a container division (styles shown inline simply for simplicity's sake - normally they should go in the stylesheet):


<body style="margin:0;padding:0;background-color:orange;color:black;">
<div style="width:980px;margin:0 auto;">

The rest of your tags and content here

</div>
</body>

Now, on to your particular issue, although there may be other problems, you cannot use text-align:center; align="center" or the <center> tag in such a way as it will be a parent element affecting, or style affecting the elements within the slide show in IE. The show is made up of three divisions, so if you have any styles applying to divisions that aren't contradicted by the script's styles, these will carry over. IE's developer toolbar shows a lot of text-align:center; currently applying to the slide show and its immediate parent divisions. Since the slide show's divisions are absolute in a relative container, this will tend to throw things off in IE.

I will have a bit of a further look to see if anything else is at work here other than all of the things I've already mentioned.
jscheuer1
12-25-2007, 07:36 AM
After further testing, the main problem in IE appears to be:


Leave the body alone for the most part. You can set font, color, background, margin, and padding for it. For anything else, such as the width, and to center content, use a container division (styles shown inline simply for simplicity's sake - normally they should go in the stylesheet):


<body style="margin:0;padding:0;background-color:orange;color:black;">
<div style="width:980px;margin:0 auto;">

The rest of your tags and content here

</div>
</body>

I added the container division to a local copy of your page and set the body:


<body style="width:auto;margin:0; padding:0;">
<div style="width:980px;margin:0 auto;">

That's my container under it. I closed my container just before the closing </body> tag at the end of the page. Took care of things here. If you remove the width from the body selector in the stylesheet and zero out the padding and margin there, you need not style the tag, similarly the style for the overall containing div tag can go in the stylesheet, give it a unique id, as there should be only the one div styled that way on the page.
BradBlog
12-25-2007, 11:27 PM
Thank you, John!!!

It's a merry Xmas indeed! That did the trick! Guess I shoulda known to come here before spending three days trying to figure that out, teach myself about "hasLayout" and all sort of various arcane inanity.

As to the other issues you mention, looks like I've got a fair bit of tidying up to do, as well. Will do. But at least this particular puzzler has been nailed.

Thank you again!