Member Avatar for ofir0803

hi
I'm trying to solve this problem without success for two days
i have a problem only in google chrome (in other browser it's fine)
the text of my scrolling news is cut off on the right side.


help please....

  • 3 Contributors
  • 7 Replies
  • 110 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by ofir0803

Dani AI

Generated

Summary and practical fixes

This thread shows a classic case: browser rendering differences + CMS-generated markup. observed right-side clipping in Chrome; correctly pointed to broken HTML as a likely root cause and suggested spacing tweaks. When the CMS injects positional styles (absolute positioning and forced widths) they can interact with RTL layout and different engines to produce the clipping seen only in Chrome.

What to do (priorities)

  • Best: fix the CMS so the HTML/CSS it emits is valid. That eliminates cross-browser surprises and avoids fragile overrides.
  • If you cannot change the CMS, fix at runtime: either override the bad inline rules with CSS that applies later, or remove/repair the inline styles with JavaScript once the element exists. Overriding with !important works but is a last resort.

Quick runtime patterns

  • CSS: target the scrolling container and its inner text to allow visible overflow (use overflow/text-overflow/white-space to control clipping) rather than forcing a fixed width.
  • JavaScript: add a small script that runs early (head) and waits for the container to appear, then removes or adjusts the offending inline style so the layout can flow normally. A robust approach is to use a MutationObserver to catch the element when it is inserted and then clear or change the inline width/position.

Debug tips

  • Use Chrome DevTools to toggle the inline styles live (disable width/position to see the effect).
  • Validate the page to check for unclosed tags or bad nesting (these change the DOM tree and how browsers apply CSS).
  • Read MDN notes on layout and runtime mutation handling: MutationObserver and overflow/text-overflow.

Recommended Answers

All 7 Replies

Member Avatar for Dandello

Well, first you want to validate your code. Frequently these little glitches clear up when the code is good.

My bet is either MSIE and Firefox OR Chrome has gone to quirks mode because of the validation issues.

Member Avatar for ofir0803

Well, first you want to validate your code. Frequently these little glitches clear up when the code is good.

My bet is either MSIE and Firefox OR Chrome has gone to quirks mode because of the validation issues.

i can't do this because this html comes from a cms system and i can't manipulate the html code.
i must fix it only in css

can it be done?

Member Avatar for Dandello

No - there is an improperly nested <tr> tag (or maybe the <td> that's supposed to be inside is missing) and improperly closed <br>s (it's supposed to be <br />, not </br> The code the cms is creating has issues. Without those issues being addressed, I doubt the page will render properly in Chrome.

You're not allowed to copy the code, fix it, and upload it to the server under a new name?

Member Avatar for inplainsite

Did you try using "padding-right" or "margin-right"? You may even be able to make it so it just shows the overflow of the text.

Member Avatar for ofir0803

Did you try using "padding-right" or "margin-right"? You may even be able to make it so it just shows the overflow of the text.

padding and margin not working.
i discover that is from the function property.
i have to change the function property to width:120px from width:100%.

but i can add only js to the head of the html and this function is called in the middle of the document.

Member Avatar for Dandello

Make this line

<div id="scrollingIntMainDiv" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 120px;" dir="rtl" align="right">

This:

<div id="scrollingIntMainDiv" dir="rtl" align="right">

The various relative and absolute positions are conflicting.

Of course this doesn't solve the problem of the CMS system creating really bad code...

Edited by Dandello because: n/a
Member Avatar for ofir0803

Make this line

<div id="scrollingIntMainDiv" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 120px;" dir="rtl" align="right">

This:

<div id="scrollingIntMainDiv" dir="rtl" align="right">

The various relative and absolute positions are conflicting.

Of course this doesn't solve the problem of the CMS system creating really bad code...

wow !

thank u very much
i solve it like this

<style type="text/css">
#scrollingIntMainDiv{
position:static !important;
}
</style>
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.