TYPO3 Core

Image?

I use fluid_styled_content.

Here is some of my RTE configuration, set in a PageTSConfig.ts file

RTE.default {
    contentCSS = EXT:my_ext/Resources/Private/rte_content.css
    ignoreMainStyleOverride = 1

    showStatusBar = 1

    showButtons := addToList(copy, cut, paste)
    showButtons := addToList(pastetoggle, pastebehaviour)
    showButtons := addToList(undo, redo)
    showButtons := addToList(removeformat)
    showButtons := addToList(formatblock, blockstylelabel, blockstyle)
    showButtons := addToList(textstylelabel, textstyle)
    showButtons := addToList(orderedlist, unorderedlist)
    showButtons := addToList(emphasis, strong)
    showButtons := addToList(subscript, superscript)
    showButtons := addToList(insertsofthyphen)
    showButtons := addToList(link, unlink)
    showButtons := addToList(acronym, findreplace)
    showButtons := addToList(spellcheck)

    proc.allowTags = h3

    buttons.formatblock {
        addItems = h3
        restrictToItems = h3, p
        items.h3 {
            label = h3
            tagName = h3
        }
    }
}

rte_content.css contains a mixed-case class "linkList", which appears all-lowercase in the block style selector of any ul element. The problem does not occur in Firefox.

/* make ul.linkList selectable */
ul.linkList {}

Adding styling rules to the .linkList class in the css file, does not make any difference.

I hope this is more helpful than my initial bug report. If this example does not help, I will try to provide a minimal one.

I can confirm it with the latest master (8.0-dev) and Fluid Styled Content; steps to reproduce:

1) Set a very basic RTE configuration:

RTE.default.showButtons = *
RTE.default.contentCSS.file2 = fileadmin/rte.css
RTE.classes{
 linkList{
     name= linkList
     value=color: #FF6600;     
 }
}
RTE.default.proc.allowedClasses := addToList(linkList)

2) write the file /fileadmin/rte.css with the following content:

ul.linkList{
 color:#FF6600;
}

3) Create a Text CE, write an unordered list as content; select it; select "linkList" from the Block style dropdown

RESULT:

- on Chrome and Safari, the list is saved as <ul class="linklist">,,, (all lowercase)
- on Firefox, it is saved with the correct capital letter

Its is a mess.
Why?
When setting this changed lowercase classes within RTE from Chrome
they will be unknown(!) in other Browser.
So using Chrome is creating text-elements messed up after using this new and unknown class "linklist".
Editing again the same text will result in "Unknown style" in Firefox!

The "bug" or mess is: Chrome tries to be strictly conform to W3-rules - am I right?
And CSS-classes have to be lowercase in our days.

Chrome is accepting and respecting CamelCase classnames in existing html-code -
but RTE in Chrome reads an existing linkList as linklist and saves this new "linklist" into the html-code.
This makes the css useless in the typo3-text-element.
These "linklist" and "linkList" or "LinkList" are completely different classnames
and to not have anything to do with each other - in all browsers!!

So the following procedure resolve this strict-html Chrome RTE-problem:
Change your typo3-settings, typo3 has a already a solution.
Use:

1. this includes the css-classes into the RTE.
2. The following lines are not needed at all for using this classes from rte.css

1. But the following lines are usefull to make the class as "linkList" readable for human editors AND Chrome.
2. Rewrite in rte.css the classname "linkList", to what Chrome and W3 want:
3. The lowercase css-classname "linklist".
4. write "p.linklist" as css-definition in your rte.css
5. RTE now knows its a classname and presents it in the block-style list in typo3-backend.

1. Than redefine this classname "linklist" for a better use in RTE and make it readable for your editors,
2. set an additional .name for the css-class
3. This is only needed for Chrome if you want a CamelCase name in the RTE block-style list
4. instead of the lowercase css-classnames from the rte.css

1. otherexample.name = Other Textformat
   }

1. RTE.default.proc.allowedClasses:=addToList ...
2. useless for classnames from the rte.css file.
3. They are already defined there ;-)

This solves the problem and is available within existing definition and configuration options
in RTE. Now editors with Chrome and Firefox can work together.

PS.
To use old and new linklist and linkList without conflicts in existing installations,
you should use both like p.linklist, p.linkList { your css formats } as a class-definition in rte.css
Remember linklist and linkList are different classes for css!!
REPLACING one with the other will make existing webpages look strange: The old class is unknown now.
Only both writings together will satisfy Chrome and Forefox and your editors ;-))

Another mess:
In my tip above all comment chars starting a line "#"
we use in typoscript are converted to numbers of a list.
Nevertheless I hope the tip is usefull to you.