EditLive CSS limitations?

Rhythmyx Technical Discussion
1

Does anyone know the limitations of CSS rendering in EditLive! version 6.7.5.27? Specifically, is the engine that renders the content in the “Design” view limited to only very basic CSS selectors and declarations (like, IE 5-era basic)? For instance, I have content that’s marked up like this:
<code style=“white-space: pre-wrap;”>
<ul class=“tabheader four-tabheader”><br /> <li class=“top-radius-corner active first” id=“content-one”><a href="#">Tab 1</a></li><br /> <li class=“top-radius-corner” id=“content-two”><a href="#">Tab 2</a></li><br /> <li class=“top-radius-corner” id=“content-three”><a href="#">Tab 3</a></li><br /> <li class=“top-radius-corner last” id=“content-four”><a href="#">Tab 4</a></li><br /></ul>
</code>
And CSS that looks like this:
<code style=“white-space: pre-wrap;”>
ul.tabheader li.top-radius-corner {<br /> background-color: #CCCCCC;<br /> font-size: 14px;<br /> font-weight: bold;<br /> height: 40px;<br /> margin: 0 0 10px 0;<br /> text-align: center;<br /> ephox-visible: false;<br />}

ul.tabheader li.active {<br /> background-color: #333;<br /> ephox-visible: false;<br />}

ul.tabheader li a {<br /> color: #000000;<br /> font-size: 14px;<br /> font-weight: bold;<br /> text-align: center;<br /> text-decoration: none;<br /> ephox-visible: false;<br />}
</code>
So, I’m expecting to see all four list items styled as specified by the first declaration with the first list item having a darker gray background. Instead, I see only the middle two list items styled correctly and NO styling on the first or last list items. Like so:

Does Ephox choke on rendering CSS on elements with more than one class? Any way around this limitation if that’s the case?

Thanks!

2

Hi njohnson:

I am not aware of ephox screwing up inline css, unless that information was inserted inline to another piece of content. Are you putting your style declarations within the edit live widget? Also what is the ephox-visible:false attribute?

3

Are you on a mac…how did you customize the ephox editor? Are you using rxs_navbase to pull in your css properly within the template? Have you tried previewing your content outside the design view?

4

The styles are being pulled in from an external stylesheet specified in the <code><head></code> of <code>elj_config.xml</code>. The <code>ephox-visible: false</code> on each declaration prevents the style from being listed in the Ephox style control; these styles aren’t meant for the end user to see and select from that menu, only to style the content that appears in the editor to give them an idea of how it will look when it’s published.

I am on a Mac, but this issue appears in both Windows and Mac browsers. Ephox was customized using <code>elj_config.xml</code>. The elements display fine outside of Ephox.

Upon further investigation, it seems like the underlying cause is that <strong>Ephox chokes on applying styles to elements with a space in the value of the <code>class</code> attribute</strong>. If, for example, I remove all spaces from the <code>class</code> of the first <code><li></code>, it renders correctly. Spaces in the <code>class</code> is, of course, valid in all flavors of HTML, so this seems like a legitimate bug in the Ephox rendering engine.