[TYPO3-content-rendering] CSS-styled-IMGTEXT and csi-clear

[Ernesto Baschny [cron IT]]

Hi,

I would like to get rid of the csi-clear DIV in current rendering of
CSS-styled-imgtext (see beta2).

A potential solution is presented here:

  http://www.positioniseverything.net/easyclearing.html

german translation here: http://www.jassesnee.de/easyclear/

Basically, it uses the :after pseudo-attribute for the text-part that we
need to get expanded to the CE-box for CSS2-compliant browsers, the
"Holly hack" setting a 1% height for IE and also a IE-Mac hack
("display: inline-table").

Maybe someone can try this CSS, while removing any reference to the <div
class="csi-clear"> from the code:

/* keep it in a box: The CSS2 way */
DIV.csc-textpic-above DIV.csc-textpic-text:after,
DIV.csc-textpic-below DIV.csc-textpic-text:after,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-text:after,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-text:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* keep it in a box: IE-Mac fix */
DIV.csc-textpic-above DIV.csc-textpic-text,
DIV.csc-textpic-below DIV.csc-textpic-text,
DIV.csc-textpic-intext-right-nowrap DIV.csc-textpic-text,
DIV.csc-textpic-intext-left-nowrap DIV.csc-textpic-text {
    display: inline-table;
}

/* keep it in a box, the IE-win way \*/
* html DIV.csc-textpic-above DIV.csc-textpic-text { height: 1%; }
* html DIV.csc-textpic-above DIV.csc-textpic-text { height: 1%; }
* html DIV.csc-textpic-above DIV.csc-textpic-text { height: 1%; }
* html DIV.csc-textpic-above DIV.csc-textpic-text { height: 1%; }
/* end hide from IE-mac */

Adapted cron_cssstyledimgtext with an adapted CSS from above worked fine
for me on a 3.8.1 site. So if this is the solution, we would get even
cleaner XHTML-code for our IMGTEXT and still having it "in-a-box".

Can more people try that out or discuss this potential solution?

Cheers,
Ernesto