Bug #36541

in css hard-coded margin-left (or right) of 510px for "csc-textpic-text" in layout 25 and 26

Added by Kurt Kunig over 6 years ago. Updated about 1 year ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
Frontend
Target version:
Start date:
2012-04-25
Due date:
% Done:

100%

TYPO3 Version:
4.7
PHP Version:
5.3
Tags:
Complexity:
easy
Is Regression:
Sprint Focus:

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
}

36541.diff View (1.95 KB) Torben Hansen, 2012-04-26 12:28

36541_2.diff View (3.05 KB) Torben Hansen, 2012-04-27 10:36


Related issues

Related to TYPO3 Core - Bug #35814: Centering Images in Text with Image does not work due to missing style Closed 2012-04-10
Related to TYPO3 Core - Feature #31767: Integrate accessible content rendering Closed 2011-11-12
Related to DAM for Content elements - Bug #44291: Images besides Text uses wrong margin Resolved 2013-01-03
Related to TYPO3 Core - Bug #35586: maxWInText dont work as expected Closed 2012-04-03

Associated revisions

Revision a3f6f262 (diff)
Added by Torben Hansen over 6 years ago

[BUGFIX] Wrong margin calculation for Text/Image

This patch fixes a wrong calculation of margins for Text/Image
items with the properties "Beside text, left" and "Beside
text, right".

Change-Id: Ie484685aa2839123c42338862c241403614e7f7a
Fixes: #36541
Releases: 6.0, 4.7
Reviewed-on: http://review.typo3.org/10995
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter

Revision 4b3513d1 (diff)
Added by Torben Hansen over 6 years ago

[BUGFIX] Wrong margin calculation for Text/Image

This patch fixes a wrong calculation of margins for Text/Image
items with the properties "Beside text, left" and "Beside
text, right".

Change-Id: Ie484685aa2839123c42338862c241403614e7f7a
Fixes: #36541
Releases: 6.0, 4.7
Reviewed-on: http://review.typo3.org/12328
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter

Revision a949494a (diff)
Added by Torben Hansen over 6 years ago

[BUGFIX] Wrong margin calculation for Text/Image

This patch fixes a wrong calculation of margins for Text/Image
items with the properties "Beside text, left" and "Beside
text, right".

Change-Id: Ie484685aa2839123c42338862c241403614e7f7a
Fixes: #36541
Releases: 6.0, 4.7
Reviewed-on: http://review.typo3.org/10995
Reviewed-by: Steffen Ritter
Tested-by: Steffen Ritter

History

#1 Updated by Kurt Kunig over 6 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; }

#2 Updated by Torben Hansen over 6 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.

#3 Updated by Torben Hansen over 6 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?

#4 Updated by Oliver Hader over 6 years ago

Torben Hansen wrote:

The problem was introduced with #31767

Maybe Oliver can help?

In issue #35814 there was a similar thing and Patrick might have a suggestion on how to deal with it.

#5 Updated by Oliver Hader over 6 years ago

  • Assignee deleted (Oliver Hader)

#6 Updated by Torben Hansen over 6 years ago

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.

#7 Updated by Kurt Kunig over 6 years ago

Thank's all, it works now!

#8 Updated by Torben Hansen over 6 years ago

@Kurt: Did you use the patch? If yes, I can try to commit it, so some core developers can review it.

#9 Updated by Kurt Kunig over 6 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)

#10 Updated by Torben Hansen over 6 years ago

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: Can you have a look at this issue and give me some feedback?

#11 Updated by Kurt Kunig over 6 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.

#12 Updated by Scanlitho no-lastname-given over 6 years ago

36541_2.diff works thanks!

#13 Updated by Gerrit Code Review over 6 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

#14 Updated by Scanlitho no-lastname-given over 6 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?

#15 Updated by Torben Hansen over 6 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.

#16 Updated by Gerrit Code Review over 6 years ago

Patch set 2 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995

#17 Updated by Kurt Kunig over 6 years ago

the failure is still in 4.7.1!?

#18 Updated by Georg Ringer over 6 years ago

otherwise the issue would have been resolved.

please look at the review in gerrit and the comments there

#19 Updated by Steffen Becker over 6 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...

#20 Updated by Gerrit Code Review over 6 years ago

Patch set 3 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995

#21 Updated by Gerrit Code Review over 6 years ago

Patch set 4 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995

#22 Updated by Gerrit Code Review over 6 years ago

Patch set 5 for branch master has been pushed to the review server.
It is available at http://review.typo3.org/10995

#23 Updated by Gerrit Code Review over 6 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

#24 Updated by Torben Hansen over 6 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#25 Updated by Riccardo De Contardi about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF