[SOLVED] TYPO3: 2 news plugins on 1 page get mixed up

TYPO3: 2 news plugins on 1 page get mixed up

I have a page that consists of 2 news plugins (extension key = "news", typo3 version = "6.2.38"). I have created those 2 plugins in the backend. Both news plugins have the same folder as their source of articles. I have assigned "categories" to the articles inside the source folder. Now the the first plugin is supposed to show the articles of category "A" and the second plugin is supposed to show the articles of category "B".

Both plugins activated: If both plugins are activated, all articles ("A" and "B") appear underneath the title of plugin 2. Plugin 1 only shows its title without any articles below it.

Only plugin 2 activated: I only see articles of category "B" as expected.

Only plugin 1 activated: I only see articles of category "A" as expected.

EDIT: Here comes the structure of the resulting HTML. "c1" is the content element of the first plugin and "c2" is the content element of the second plugin.

<div id="c1" class="csc-default">
    <div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Articles of plugin 1:</h2></div>
    <div class="news">
        <div class="news-list-view">
            .
            . one div for each article
            .
        </div>
    </div>
</div>

<div id="c2" class="csc-default">
    <div class="csc-header csc-header-n1"><h2 class="csc-firstHeader">Articles of plugin 2:</h2></div>
    <div class="news">
        <div class="news-list-view">
            .
            . one div for each article
            .
        </div>
    </div>
</div>

It looks like everything is in correct order. However, what I see in the browser is (in this order): 1) "Articles of plugin 1:" 2) "Articles of plugin 2:" 3) ALL the articles of BOTH plugins.

Solution

if the HTML provided by the server is correct (as your code shows) the display can be influenced by two things:

CSS
Javascript
invalid HTML

possible problems with CSS can result from floats (or positions), which show content out of order in HTML.

with Javascript you can modify the build DOM, so elements are positioned in other order than originaly given.

Browser try to fix broken HTML, this might result in elements boxed inside each other than in line.

All possibilities can be examined with tools like Firebug. compare the DOM-Code with the original server-code (CTRL-U). Differences result from javascript or invalid HTML (e.g. missing closing tag).

CSS tweaks can be found inspecting the CSS of each element for CSS properties.