Ultimate Fade-In Slideshow—causing divs to shift

[elara]

Ultimate Fade-In Slideshow (v2.4)
Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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, which is currently under construction.

Thanks in advance for any and all help!

Edit: 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.

[jscheuer1]

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.

[bernie1227]

There are some serious issues in ie9

[jscheuer1]

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.

[elara]

So, here's the link to the site, 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!

[jscheuer1]

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?

[elara]

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.

[djr33]

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:

http://validator.w3.org/check?uri=ht...Inline&group=0
26 errors. Fix those, then you'll have an easier time fixing the whole page and making it work in various browsers.

[jscheuer1]

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.

[bernie1227]

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>
  				<div id="navlinks"> <!---------navlinks div------------->
  					<ul>