Typo3: htmlRTE “Zebra” tables (classes for odd/even rows) using TSConfig

It took me some hours and the documentation is not very good, but finally I have found out how to mark up table rows from RTE tables (not elements with content type “table”) with alternating CSS classes. Put this into your page TSConfig:

RTE.classes.zebra-rows {
  name = Zebra table
  alternating.rows {
    startAt = 1
    oddClass = odd
    evenClass = even
  }
}

RTE.default {
  ignoreMainStyleOverride = 0
  inlineStyle.zebra-tables (
    table.zebra-rows { }
    table.zebra-rows tr { background: lime; } /* or whatever color */
    table.zebra-rows tr.odd { background: red; } /* or whatever color */
  )
  classesTable = zebra-rows
  classesTR = odd, even
  proc.allowedClasses := addToList(zebra-rows, odd, even)
)

Then you only have to assign the block style “Zebra table” in the RTE.

It is also be possible to put the styling into a content CSS file. In that case, you have to set ignoreMainStyleOverride=1, contentCSS=path/to/content.css and then omit the inlineStyle lines.

For ideal table processing, put this into your TypoScript setup (not TSConfig):

lib.parseFunc_RTE.externalBlocks = ul,ol,table
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list >
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.callRecursive = 0
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.stdWrap.parseFunc {
  makelinks = 1
  makelinks.http.keep = scheme,path,query
  makelinks.mailto.keep = path
  tags {
    link = TEXT
    link {
      current = 1
      typolink.parameter.data = parameters : allParams
    }
  }
}

It makes the table class zebra-rows working and prevents wrapping table cells with <p> etc. while keeping links intact.

Have fun!

IE6: AlphaImageLoader rendering problem when 3D acceleration available

If you ever had the pain to code Web designs with the goal to support IE6, you will know the AlphaImageLoader workaround to “emulate” transparent PNGs. Of course, this workaround brings new problems, for instance the problem that links are not clickable when positioned over a AlphaImageLoader PNG. This can be fixed with position: relative.

You won’t believe it …

However, I discovered a fairly new problem that surprised even me: there’s a bug with ImageAlphaLoader that hides part of Web pages when and only when 3D hardware acceleration is available. You can test this with 2 environments:

• A Windows XP installation without hardware graphics acceleration available. For instance, use a normal virtual machine (VirtualBox).
• A Windows XP installation with acceleration available. For instance, use a native WinXP installation with ATI/Nvidia drivers or VirtualBox with the experimental 3D acceleration support.

Sample

I can’t post the full HTML/CSS code because it involves images that don’t belong to me (that’s the reason why the screenshots are blurred) and I don’t want to invest the time and make a proof-of-concept file only for a stupid IE bug. But I have made two screenshots:

1. Loaded the page in IE6
2. Maximized
3. Restored => display bug in action (see screenshot 1)

The second screenshot shows the correctly rendered page using the workaround below:

My workaround

I had the idea to force a redraw by using something like * { zoom: 1; } in the IE6 stylesheet, and to my surprise, it seemed to work.