View Full Version : Ultimate Fade-In Slideshowócausing divs to shift

10-01-2012, 11:53 PM
Ultimate Fade-In Slideshow (v2.4)
Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I'm having some issues with the Ultimate Fade-in Slideshow whereby it is causing all divs on the same page as the slideshow to shift. Everything seems to work fine in Safari, but I'm getting shifts when I view the page in Firefox (15.0.1) and in Chrome. I haven't tested yet on IE. I've combed through the code to see if there were any margin or padding settings that were causing things to go awry, but was unable to find anything. I should add that I am a relative web noviceóhaving just completed my first university course in HTML and CSS, so it's not unlikely that there is something obvious to you that is beyond the scope of my experience/expertise.

I've uploaded a PDF of two screenshots of the websiteóone page where the slideshow is at the top, and another page where there is no slideshow at all. You can see that everything shifts a tad (~10px) to the left on the page with the slideshow. The amount of shift is even more egregious in Chrome. Any ideas as to how to solve this? I'm in love with this script, as it's configured perfectly for this application, and is easy to manipulate/customize, but the nudging/shifting of the divs from page to page is driving me batty!

You can test the issue first hand by visiting the test site here (http://aytoth.com/enlisted_website/index.html), which is currently under construction.

Thanks in advance for any and all help!

Something's gone a bit wonky with my hosting so unfortunately I can't post a link yet for you to test the problem first-hand, but hopefully I'll have that up shortly.

10-02-2012, 03:39 AM
I can't tell anything from your image, it's too small. I was able to navigate to the page, but it looks fine in Chrome.

10-02-2012, 05:23 AM
There are some serious issues in ie9

10-02-2012, 05:54 AM
I didn't check in that browser, but right, probably the non-standard comment tags, example:

<!---------project #3-------------!>

should be:

<!-- -------project #3----------- -->

A comment tag should begin with <!-- followed by a space, and end with a space followed by -->

Anything else and the browser may barf on it.

That may or may not be the problem in IE, but it often is. Even so, there could also be other problems.

10-03-2012, 08:52 PM
So, here's the link to the site (http://aytoth.com/enlisted_website/), so you can test out the issue first-hand. You'll notice that when you click on say, "work", that everything shifts to the right relative to how it was on the homepage. I tried editing the comment tags to include the space before and after the comment text and I'm still getting the shifting. To Bernie, thanks for the head's up. I'm on a Mac, so I haven't yet tested on IE, but will definitely be doing so soon.

If anyone else has any ideas for how to troubleshoot, I'd greatly appreciate it. Thanks again everyone!

10-03-2012, 09:33 PM
Please don't reply with quote unless it's required for clarity.

Still looks all messed up in IE - again probably due to those non-standard comments. In Chrome here I see no jumping left to right when I click work. It does jump up to fill the space vacated by the slideshow. Firefox is fine too.

Are you by chance on a Mac?

10-03-2012, 10:02 PM
John, yes as I mentioned, I am indeed on a Mac. I haven't tested this in a PC environment yet. I already removed the non-standard comments, so the fact that the issue persists suggests it might be something else, no?

ETA: I just tested this on a PC. As you mentioned, John, it's working fine in Firefox and Chrome (though I forgot to check which versions I was on), and as Bernie mentioned, it's serious chaos in IE9. I suppose that's yet another issue that needs attending to, although I'm not sure what the issue may be...

Sorry for all the novice questioning and thanks for all your patience and help thusfar. I really appreciate it.

10-03-2012, 10:46 PM
It's a generally good idea to validate your page. It's not always a huge obvious problem if you don't-- it's still a good idea though-- but sometimes it is-- sometimes it can be part of the reason the page isn't working in a big way.
So, if you find yourself unsure of why it isn't working and unsure of what to do next, that's probably a good next step:

26 errors. Fix those, then you'll have an easier time fixing the whole page and making it work in various browsers.

10-03-2012, 11:16 PM
John, yes as I mentioned, I am indeed on a Mac. I haven't tested this in a PC environment yet. I already removed the non-standard comments, so the fact that the issue persists suggests it might be something else, no?

No. An HTML comment begins with <!-- followed by a space and ends with a space followed by -->

You did change them, but most still end with --!> which is no ending at all as far as IE is concerned, and might be the problem in those other MAC browsers where there is a problem. But that might be something else.

Daniel's (djr33's) suggestion to validate the HTML code is not a bad idea in this case.

Sorry for not picking up sooner that it was a MAC you were talking about. I have none to test on, so other than suggesting that you validate the code including making the comments standard, I'm not sure what to offer.

Take care of that, and if the problem persists, I will have another look.

Let us know if there are things you are having trouble fixing for validation.

10-04-2012, 12:24 AM
the site now looks fine in ie:

however, there is a blank image src, here in the code:

<div class="logo"> <!-- -------logo div----------- -->
<a id="logo" href="index.html" title="Enlisted Design home"><img src=""/>Enlisted Logo here</a>
<div id="navlinks"> <!---------navlinks div------------->

10-04-2012, 01:23 AM
Daniel, thanks for the tip. I've gone and cleaned everything up so the homepage and the work page both pass validation.

Bernie, thanks for the update on working in IE9. Good to hear.

John, in cleaning the code up to pass validation, I've corrected (really!) the comment tags this round.

However, despite all this, I'm still getting the weird shifting in Firefox (15.0.1) on my mac. The upside is that now everything is working fine in Chrome (Version 22.0.1229.79), so I can add that alongside Safari in the list of browsers with no issues (again, on mac). On PC, the upside is that the site is loading (for the most part) correctly in IE9, but I'm still getting the pesky shifting in IE9, Chrome, and Firefox.

10-04-2012, 01:40 AM
working on firefox 15.0.1 on pc:
working on safari 5.1.7 on pc:
working on opera 12.0.2 on pc:

10-04-2012, 06:48 PM
Bernie, are you not getting any shifting of the divs from the homepage to the work page? I was able to see that the page is now loading on PC in Firefox, Chrome, and IE9 but I'm still getting the shifting divs which was the original target to troubleshoot. Anyone else seeing the shifting divs? If so, any ideas on how to correct at this point?

Thanks again!

10-04-2012, 07:33 PM
I'm on Windows 7. I've tried shifting between the two pages in the latest IE, Chrome, Firefox, and Opera. I've never seen this shift.

Have you ever seen the shift on Windows? If so, which version of Windows, and which browser, and which version of that browser? If not, all I can tell you is to get rid any linebreaks in the code that might be causing it. Like if you see a gap in a spot like this:

<img src="whatever.jpg" alt="">
<!-- some comment -->
<div>Some content</div>

or this:

<img src="whatever.jpg" alt="">
<div>Some content</div>

Make it like:

<img src="whatever.jpg" alt=""><div>Some content</div>

10-04-2012, 10:16 PM
I can't seem to replicate the issue, testing on all major browsers in windows 8 and Ubuntu 12.10, after I have breakfast, I will test it in ie6 on windows xp and safari, chrome and ie9 on windows 7

10-04-2012, 10:43 PM
Update: this is what I'm experiencing so far:

WORKING (no shifting from left to right of the divs):
MAC (OSX Lion, 10.7.4):
- Safari, Version 6.0 (7536.25)
- Chrome, Version 22.0.1229.79

PC (Windows 7):
- IE9

NOT WORKING (page loads, but the divs shift slightly from the home page to work page):
MAC (OSX Lion, 10.7.4):
- Firefox, Version 15.0.1

PC (Windows 7):
- Chrome, Version 22.0.1229.79
- Firefox, Version 14.0.1

Thank you again everyone for your continued help. I really want to say thanks again because I greatly appreciate your efforts.

Oh, and if you're curious, you can download a quick PDF (http://aytoth.com/enlisted_website/shifting_divs.pdf) that shows the shifting I'm talking about.

10-04-2012, 11:36 PM
I can't see any noticeable div shifting on chrome on windows 7

10-04-2012, 11:52 PM
Wow, that's very interesting Bernie. Chrome on Windows 7 is one of the worst offenders on my end. It not only moves side-to-side, but simultaneously up-and-down, so the net effect is a diagonal shift of all the divs. After all the changes thusfar (correcting the comment tags and getting both pages to pass validation), I cleared the cache in all browsers and the problem persists in the ones I listed above. Rather frustrating, really...

Any idea as to why it seems to work differently from machine to machine? I didn't think it would be this hard to replicate the problem... I suppose it's not a terrible thing that it is actually working on your end, but I'm still puzzled as to why I can't seem to fix over here. I'm less than inclined to remove the line breaks in the code as John suggested because it makes going through things much harder for me as I can't read through code as fluidly as those who are more proficient. That and I've worked with this slideshow before with no issues so, at least in principle, it would seem that my current line-breaking practice is not the culprit.

10-05-2012, 12:03 AM
It seems to be only your machine so far that can replicate the problem, I've tested onto machines with windows 7, windows 8 and Ubuntu, and John has also tested with windows 7 and we can't see any problems, Like I said before, I'm going to test on ie6 on xp now, and I'll tell you how it goes.

10-05-2012, 12:06 AM
Yeah, I have that same version of Chrome on Win 7 and if I line up the bottom of the page with a vertical line on something behind the browser, there's no shift at all.

You may have already fixed this. Make sure to clear the browser's cache and refresh the page.

10-05-2012, 12:07 AM
Well, actually, it would be three machines. I'm experiencing this problem on my work computer and home computer (both iMacs, one running OSX Lion and the other running OSX Leopard) as well as on my colleague's machine—who's running Windows 7. Again, I'm glad to hear that the problem isn't as pervasive as I had thought, but on the flip side of the coin, this is making it rather difficult to troubleshoot when those assisting you can't see the problem. =P

10-05-2012, 01:20 AM
working correctly on ie6 on windows xp: