Bug #36541
closedin css hard-coded margin-left (or right) of 510px for "csc-textpic-text" in layout 25 and 26
100%
Description
If you want to show an image with the look and feel of "intext-right-nowrap" e.g. you will have the layout
# intext-right-nowrap 25 = TEXT 25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES######TEXT###</div> # intext-left-nowrap 26 = TEXT 26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES######TEXT###</div>
the result is:
<div id="c38" class="csc-frame csc-frame-frame1"> <div class="csc-textpic csc-textpic-intext-left-nowrap"> <div class="csc-textpic-imagewrap"> <div class="csc-textpic-text"> </div> </div>
with a hard-coded margin-value like:
.csc-textpic-intext-left-nowrap .csc-textpic-text { margin-left: 510px; } in line 109 of the implemented standard-css of TYPO3
In former versions the margin was calculated based on the width of the inserted image!!!
So you have to correct this in your own template with:
tt_content.image.20.layout { # intext-right-nowrap 25 = TEXT 25.value = <div class="csc-textpic csc-textpic-intext-right-nowrap###CLASSES###">###IMAGES###<div style="margin-right:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div> 25.insertData = 1 # intext-left-nowrap 26 = TEXT 26.value = <div class="csc-textpic csc-textpic-intext-left-nowrap###CLASSES###">###IMAGES###<div style="margin-left:{register:rowWidthPlusTextMargin}px;">###TEXT###</div></div><div class="csc-textpic-clear"><!-- --></div> 26.insertData = 1 }
Files
Updated by Kurt Kunig over 12 years ago
... and you have to add in your private CSS:
/* in 4.7 standard margin of 510px !? */
.csc-textpic-intext-left-nowrap .csc-textpic-text { margin-left:0; }
.csc-textpic-intext-right-nowrap .csc-textpic-text { margin-right:0; }
Updated by Torben Hansen over 12 years ago
- Assignee set to Ernesto Baschny
Actually, the margin is not hardcoded but calculated at runtime and added to the CSS Stylesheet.
I had a quick look at the code and the calculation is based on "styles.content.imgtext.maxWInText", which is not set in the default settings of CSS Styled Content. This all seems to have something to do with the new accessibility features of TYPO3 4.7
The bug only occours for Text/Image settings "Beside text, left" and "Beside text, right".
Something in the calculation must be wrong, since the user can decide the image dimensions himself and this must be included in the calculation.
A workaround for this issue is to set "tt_content.image.20.renderMethod = table" which renders all image/text content with tables.
Updated by Torben Hansen over 12 years ago
- Assignee changed from Ernesto Baschny to Oliver Hader
- Target version set to 4.7.1
The problem was introduced with #31767
Maybe Oliver can help?
Updated by Oliver Hader over 12 years ago
Updated by Torben Hansen over 12 years ago
- File 36541.diff 36541.diff added
I think there is a bug in calculating the left/right margin. Before TYPO3 4.7 the margin was calculated in css_styled_content and was directly rendered into the output using the register-variable "register:rowWidthPlusTextMargin".
This usage of the register has been removed in TYPO3 4.7 and has been replaced by inline css, which are calculated at runtime. Actually, the final image dimensions+margins are not included in the calculation.
The attached diff fixes the problem.
Updated by Torben Hansen over 12 years ago
@Kurt: Did you use the patch? If yes, I can try to commit it, so some core developers can review it.
Updated by Kurt Kunig over 12 years ago
Yes I did! I deleted all my entries concerning that problem in my css-file and my template-setup.
And it works! You can have a look in my test-account: http://p163334.mittwaldserver.info/muster.html (middle column, frame with the child)
Updated by Torben Hansen over 12 years ago
- File 36541_2.diff 36541_2.diff added
The bug is a little bit more complicated. What, if you have more than one text/image item of the type "Beside text, left" and "Beside text, right", where the images have different width/height settings? Then the patch does´nt work.
Attached is a second patch, which adds the UID of the content element to the classes. With this patch, the margin is calculated for each text/image item and applied to the individual class with the uid.
@Patrick Broens: Can you have a look at this issue and give me some feedback?
Updated by Kurt Kunig over 12 years ago
36541_2.diff works fine!
If you want look at the same URL (see below), second box with an image with a different width than the images above.
Updated by Scanlitho no-lastname-given over 12 years ago
36541_2.diff works thanks!
Updated by Gerrit Code Review over 12 years ago
- Status changed from New to Under Review
Patch set 1 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995
Updated by Scanlitho no-lastname-given over 12 years ago
I thought a little about it.. and tried.. with the 36541_2.diff it works, but it sets for eatch text/image element you build in the website a new line in the external stylesheet. That can not be good if you have a realy big website.
I only used the element twice and it already set 4 lines:
/* specific page styles for extension "tx_cssstyledcontent" */
.csc-textpic-intext-right-nowrap-2 .csc-textpic-text { margin-right: 360px; }
.csc-textpic-intext-left-nowrap-2 .csc-textpic-text { margin-left: 360px; }
.csc-textpic-intext-right-nowrap-10 .csc-textpic-text { margin-right: 360px; }
.csc-textpic-intext-left-nowrap-10 .csc-textpic-text { margin-left: 360px; }
Maybe it would be better to set the margin-right as inline CSS?
Updated by Torben Hansen over 12 years ago
Yes, you´re right - but that is just one problem. But you must have two lines for each element, since the margin can be different for both of them. Another problem with 36541_2.diff is, that typo3temp/ gets filled up with a lot of temp-files for the different stylesheets (e.g. stylesheet_dd48cdab80.css).
Using inline CSS could be a solution, but that would result in direct CSS output in the page header, which is´nt very beautyful.
I think, only the core developers can give us an answer on, why the margin-calculation has changed in TYPO3 4.7. I´ll try to contact Patrick directly, maybe he can help us with this issue.
Updated by Gerrit Code Review over 12 years ago
Patch set 2 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995
Updated by Georg Ringer about 12 years ago
otherwise the issue would have been resolved.
please look at the review in gerrit and the comments there
Updated by Steffen Becker about 12 years ago
Having a vanilla Typo3 4.7.1 with gridelements here, and i have the same issue:
/* specific page styles for extension "tx_cssstyledcontent" */
.csc-textpic-intext-right-nowrap .csc-textpic-text { margin-right: 980px; }
.csc-textpic-intext-left-nowrap .csc-textpic-text { margin-left: 980px; }
Only weird for the nowrap-images left/right. I don't know what exactly ist wrong here,
but I have set this in my constants:
styles.content.imgtext {
maxW = 960
maxWInText = 960
linkWrap.width = 960
# space between the images
colSpace = 20
rowSpace = 20
textMargin = 20
}
Seems the values for max-width and colspace are just added up...
Updated by Gerrit Code Review about 12 years ago
Patch set 3 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995
Updated by Gerrit Code Review about 12 years ago
Patch set 4 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995
Updated by Gerrit Code Review about 12 years ago
Patch set 5 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995
Updated by Gerrit Code Review about 12 years ago
Patch set 1 for branch TYPO3_4-7 has been pushed to the review server.
It is available at http://review.typo3.org/12328
Updated by Torben Hansen about 12 years ago
- Status changed from Under Review to Resolved
- % Done changed from 0 to 100
Applied in changeset 4b3513d14f2c71f09d039506db1ce350a988ed95.
Updated by Riccardo De Contardi almost 7 years ago
- Status changed from Resolved to Closed