Member Avatar for hkdaniWeb

Hi all,

I am working on a small project using Dreamweaver. I have a marquee with many images. Everything works fine in Dreamweaver Live View ( images keep coming out from the right end and disappear into the left end).

In IE8 (which supposedly fully support marquee, right?) , once the first image hits the left end, all the images disappear and restart from the rigth end.

I also have a button that changes direction of the marquee. In Dreamweaver view, when I hit the "right" direction button, the last image comes out from the left(then the second last, third last...etc) and continue on. (which is perfect !)

In IE8, the first (not last few) few images come out and start going right.

I have encountered a lot of problems and been able to find solution by googling.

This one, however, I am stuck. Please help if you can. And please don't tell me not to use the marquee tag...>.< I am not good enough in JS to manuelly make a marquee..

Thanks in advance!

Aaron

Codes:

<marquee id="mainMarquee" scrollamount="3" >


<img id="Putin" src="Putin.png" alt="" class="marqueeImage" onmouseover="GoSlow(this);" onclick="DoTheseThings('Putin.png','hello from putin',this,5); " onmouseout="GoNormal(this);"/>
</marquee>

//I have 20 + images at the exact same format.

  • 4 Contributors
  • 3 Replies
  • 430 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by guillermorojas

Dani AI

Generated

A concise, practical note for the thread: described the classic IE marquee glitch (scroll restarts when the lead image reaches the edge). The quick workaround reported by and — inserting invisible spacer content at the ends — is effective because it prevents the browser from deciding the scroll cycle is finished when the first image aligns with the boundary. That behavior is tied to how the runtime measures content width and when it decides to restart the loop.

What helps in addition to (or instead of) the spacer hack:

  • Make the inline content truly one long line so the engine cannot wrap or reflow it unexpectedly. Removing stray line breaks/text nodes between image tags or forcing nowrap on the container stops accidental wrapping.
  • Ensure predictable inline sizing: images set to display:inline-block and a container with white-space:nowrap keep the calculated content width stable across browsers.
  • Preload images or duplicate the image sequence (append a copy of the list) so the marquee always has more content than the viewport — this creates a seamless loop without jumps.

Small, safe CSS to try (apply to the marquee’s inner container or the marquee element if a wrapper isn’t used):

.marquee-inner { white-space: nowrap; }
.marquee-inner img { display: inline-block; vertical-align: top; margin: 0; }

A simple cloning trick (conceptual) makes the loop robust: copy the inner HTML of the scrolling container and append it to itself so the runtime never runs out of content while scrolling.

Quick checklist: remove unintended whitespace between images, confirm images are fully loaded when testing in IE (Dev Tools/Network), add the spacer or duplicate sequence if needed, and prefer the CSS nowrap + inline-block approach for more predictable behavior. This keeps the original marquee markup while addressing the IE-specific restart bug.

Member Avatar for branding4you

i have the same problem, have you resolved yours yet

Member Avatar for TrongPhuc

I have the same problem, but I have just resolved it.

By this way

<marquee id="mainMarquee" scrollamount="3" >&nbsp;


<img id="Putin" src="Putin.png" alt="" class="marqueeImage" onmouseover="GoSlow(this);" onclick="DoTheseThings('Putin.png','hello from putin',this,5); " onmouseout="GoNormal(this);"/>
</marquee>


Good luck ^^

commented: Nice solution, and Bad IE +0
Member Avatar for guillermorojas

I was the same problem with le plugin Image Marquee sur Wordpress

Plugin Name: Image Marquee
Plugin URI:

and I found the solutionadding &nbsp; at the begin and at the end

    foreach ($items as $item) {
        echo "&nbsp;&nbsp;<a href='" .$item->target. "'><img src='" .$item->img. "' " .$height. " title='" .$item->title. "'></a> [COLOR="Red"]&nbsp; &nbsp;[/COLOR] \n";
    }
Edited by Nick Evan because: Fixed formatting
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.