Member Avatar for sambaja

hi, im trying to use this script:

it works great with IE but with firefox it doesnt work when its encased within another CSS ID. It shows up, but it doesnt scroll. how can i make this work? i know its a CSS thing probably since your script generally works in firefox if its not encased within another CSS ID.

see here:

  • 2 Contributors
  • 4 Replies
  • 194 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by sambaja

Dani AI

Generated

Short take: the behavior described by (works with inline styles, breaks when wrapped) and ’s note about IDs points to a CSS/DOM mismatch rather than a bug in the scroller itself. Many scrolling scripts depend on a predictable container box and unique element IDs; if a wrapper’s CSS changes size, overflow, or positioning, Firefox’s layout/measurement can differ from IE and the script may get a zero height or a wrong reference and therefore never animate.

Checklist for pinpointing the problem

  • Confirm IDs are unique. If multiple scrollers are needed, use a class for styling and unique IDs for the script instances (good call by ).
  • Make the scroller’s wrapper an explicit box: give it a width and height, set overflow: hidden, and position: relative. Scripts that move children with top or margin usually need that anchor.
  • Ensure the element the script targets actually exists at init time (script runs after the DOM or on window.onload). A mismatch between the ID passed to the script and the actual element is a common silent failure.
  • Use Firefox’s inspector/Firebug to check computed offsetHeight, clientHeight, and scrollHeight. If any are zero or smaller than expected, the scroller won’t show movement.
  • Look for global rules (reset CSS, display:inline, floated parents) that collapse the container — inline styles “fix” things because they override those rules, but the real fix is to adjust the stylesheet.

Example structure (minimal)

<div class="scroller-wrap">
  <div id="myScroller" class="scroller"> ...content... </div>
</div>

.scroller-wrap {
  width: 400px;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.scroller {
  position: absolute; /* or relative, depending on the script's requirements */
  top: 0;
  left: 0;
  width: 100%;
}

Note: inline styling can be a quick diagnostic, but the long-term fix is to make the stylesheet provide the same explicit box model and unique identifiers the script expects. This approach explains why ’s inline workaround worked and why switching to classes/unique IDs is a cleaner solution.

Recommended Answers

All 4 Replies

Member Avatar for MidiMagic

It seems to be working on my Firefox 2.0.0.3.

Member Avatar for sambaja

HI there, thanks, it is working now. I took a chance and removed the CSS IDs that might be affecting the code, and just did the styling inline, that's why it works now. Thanks for checking out the post though. hope I can count on more help in the future :)


sam

Member Avatar for MidiMagic

Try using classes instead of ids. Browsers expect only one tag to have a given id.

Member Avatar for sambaja

Thanks, will definitely keep that in mind.

sam

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.