[TYPO3-content-rendering] TYPO 3.8 and image alignment problems in Gecko-Opera Browsers

[Torsten Schrade]

Hi folks,

Problem: When I upgraded to 3.8.0 and looked at my site with Firefox,
most of my images were not aligned properly anymore but just on the left
side. With IE however, they were allright.

Observation: There seems to be a difference regarding the rendering of
"classical" IMGTEXT-Objects in the new 3.8.0 (with "classical" I mean
the normal tt_content.image.20 rendering that comes from
css_styled_content).

Details:

In 3.7, images that were left, right or centered above or below the text
were aligned by using a

<div align="the_position"><table><img></table></div>

In 3.8, this concept seems to have been abandoned which is cool :-), as
the align-attribute is deprecated for XHTML-strict doctypes. Now it's
done with

<div style="text-align:the_position;"><table><img></table></div>

But this works only for IE, as aligning and especially centering tables
within a div should be done by setting proper margins(auto) or floating
the table. Firefox et.all simply ignore the text-align rule. This issue
is explained here in quite a good way:

http://theodorakis.net/tablecentertest.html

------------------------------------------------------------------------
A first workaround:

I've found a way to circumvent the problem, but I'm definitely not happy
with it as it creates quite some tag-soup:

Target: For Gecko-browsers and Opera we need to set margins for the
imgtext-tables or float them according to the chosen position. To avoid
messing with IE, this can be achieved by using css-attribute selectors.

1. First we need to wrap the complete IMGTEXT-Object with a
position-specific class. This can be done with

tt_content.image.20.stdWrap.dataWrap = <div
class="imageorient-{field:imageorient}">| <div class="break"></div></div>

2. Now we are able to address them seperately in our CSS:

/* this centers images in Gecko/Opera */
div[class="imageorient-0"] table[class="imgtext-table"],
div[class="imageorient-8"] table[class="imgtext-table"] {
  margin: 0 auto;
}

/* this right-aligns images above the text in Gecko/Opera */
div[class="imageorient-1"] table[class="imgtext-table"] {
  float: right;
  width: auto;
}
/* careful, sometimes other tags may follwow the table */
div[class="imageorient-1"] p {
  clear: right;
}


/* this right-aligns images below the text in Gecko/Opera */
div[class="imageorient-9"] table[class="imgtext-table"] {
  float: right;
  width: auto;
}
// this avoids following content to float besides the images
div[class="imageorient-9"] div[class="break"] {
  clear: right;
}

For the left-alignment, nothing has to be done as this initially was the
problem... ;-)

In conclusion, lots of additional divs on your page :-( It would be much
better if the core could output some position-specific class. Like

<div style="text-align: center" class="imageorient-0"><table>...</div>

And by the way, using the text-align property could sometimes lead to
unwanted alignments within the imgtext-table.

Any hints, tips or corrections to my problem are very welcome!

Cheers,
Torsten