Results 1 to 4 of 4

Thread: IE Positioning Bug with Ultimate Slideshow

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

    Default IE Positioning Bug with Ultimate Slideshow

    1) Script Title:
    Ultimate Image Fade Slideshow v1.51

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...nslideshow.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

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

    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/v...a2%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):

    HTML Code:
    <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.
    - John
    ________________________

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

  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

    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):

    HTML Code:
    <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:

    HTML Code:
    <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.
    - John
    ________________________

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

  4. #4
    Join Date
    Dec 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

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
  •