Bug #14760
closed
When I upgraded to 3.8.0 and looked at my site with Firefox, most of my images were not aligned properly anymore.
0%
Description
In the new 3.8.0 there is a bug regarding the rendering of the
"classical", table-based IMGTEXT-Objects in line 1085ff. of class.tslib_content.php. In Gecko/Opera browsers centered images and images positioned to the right all stay on the left side. With IE, however, the alignment is allright.
This is due to the fact that in 3.8 the concept of using the align-attribute for the enclosing divs has been abandoned, as
this 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
Just position images and look at your page with Firefox.
A first workaround to circumvent the problem can be achieved by inserting additional divs and using a CSS attribute-selection that only Gecko/Opera browsers unserstand. In the long run this is not desirable, as it creates quite some tag-soup. Please refer to the attached workaround.css for this.
In conclusion, it would be much better if the core could output some position-specific class in addition to the style-attribute like
<div style="text-align: center" class="imageorient-0"><table>...</div>
However, using the text-align property might sometimes be problematic as it could lead to unwanted alignments within the imgtext-table itself.
As the align-attribute is not deprecated for all the other doctypes except XHTML Strict, another maybe more economical approach could be to combine the alignment method with the chosen doctype in config.doctype.
Like with the border-attribute for images, the text-align method could only come into effect (maybe with the attached styles as inline or temporary styles) when the doctype is set to XHTML strict.
(issue imported from #M1115)
Files
Updated by Torsten Schrade almost 19 years ago
Hi,
had some time to look at this during the weekend - this alignment business is tricky... I've prepared a patch, please have a look at the attached diff (hope this file is ok, it was the first time I made a diff file ;-)
As suggested in t.p.content-rendering there are three $tablecode variants according to the alignment, that is now done with margins for centering and float:right for right-alignment. Tested on IE 5&6, Firefox, Mozilla, NN 7, O7, Konqueror.
No further need for an allign-attribute. It's done with inline styles and should be allright for all doctypes, no need to combine it with the config.doctype setting.
Please test this out cause I'm not sure about the float solution. It needs a clearing div - might there be a situation where this intereferes with other floatin gblock-levels in the neigbourhood?
Greets, Torsten
Updated by Ron almost 19 years ago
The same problem occurs for the complete page alignment when using e.g. the GLueCK template. (I know it is old fashioned, but it does cover all my needs :-))
IE does not have a problem, while in firefox the alignment is always left (I guess that is the default).
I have tried to apply the patch provided by Torsten, but is complains about being a reverse patch ???
When applying with -R (for reverse) the code gets changed, but the result is the same: no allignment for the page.
Updated by Torsten Schrade almost 19 years ago
D'oh,
looks like the <div style="text-align: center"> method is also used for the stdWrap.wrapAlign property... this is used in GLUECK for page alignment.
My patch takes only image alignment into account, so this is why it has'nt worked out for you Ron. For your GLUECK Template you can solve it by inserting the following into your Setup:
page.10.value = <table border="0" cellpadding="0" cellspacing="0" width="1" style="margin: 20px auto;">
page.stdWrap >
page.stdWrap.wrapAlign = center
Updated by Ron almost 19 years ago
Thanx for the quick reply Torsten. I had in the meantime hacked myself another way around it (in fact restoring the 3.7.0 source) by doing the following:
page.stdWrap {
offsetWrap = {$page.offset}
offsetWrap.stdWrap.wrapAlign >
offsetWrap.stdWrap.outerWrap = <div align='center'>|</div>
offsetWrap.tdParams = valign="top"
}
I suppose your way of working (with the auto) is cleaner, but the above works fine for firefox and IE, which are the only supported browsers on our intranet.
Updated by Luis Fernando over 18 years ago
Workaround não funcionou . Postei o arquivo (class.tslib_content.rar) com as alteração nas linhas 1087 e 1098 . Apenas substitua o arquivo nos diretorios :
J:\tslib
J:\typo3\sysext\cms\tslib
Updated by Luis Fernando over 18 years ago
Hi
The solution for the problem is between the lines 1087 and 1098. A small change gets the alignment running properly.
Copy the attached file into the directories below:
J:\tslib
J:\typo3\sysext\cms\tslib
Remember to back up the original file, better safe than sorry !
Updated by Michael Stucki over 18 years ago
@Luis: I deleted your attachment and replaced it with bug_1115.diff, doing exactly the same, but much easier to read :-)
@all review: We are going to release TYPO3 3.8.1 soon, and this release should definitely fix this bug. Unfortunately I have no time to test Luis' patch nor have I time to check the 2nd fix proposal which I have attached in bug_1115_solution2.diff.
If anybody has time to finish this, that would be very great!
- michael
Updated by Michael Stucki over 18 years ago
image_align_fix.diff contains the final solution as proposed by Martin Kutschker in the content rendering list.
Please give feedback ASAP since 3.8.1 is close to be ready for release.