Project

General

Profile

Actions

Bug #36541

closed

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

Added by Kurt Kunig almost 12 years ago. Updated over 6 years ago.

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

100%

Estimated time:
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
}


Files

36541.diff (1.95 KB) 36541.diff Torben Hansen, 2012-04-26 12:28
36541_2.diff (3.05 KB) 36541_2.diff Torben Hansen, 2012-04-27 10:36

Related issues 3 (0 open3 closed)

Related to TYPO3 Core - Bug #35814: Centering Images in Text with Image does not work due to missing styleClosedPatrick Broens2012-04-10

Actions
Related to TYPO3 Core - Feature #31767: Integrate accessible content renderingClosedOliver Hader2011-11-12

Actions
Related to TYPO3 Core - Bug #35586: maxWInText dont work as expectedClosed2012-04-03

Actions
Actions #1

Updated by Kurt Kunig almost 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; }

Actions #2

Updated by Torben Hansen almost 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.

Actions #3

Updated by Torben Hansen almost 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?

Actions #4

Updated by Oliver Hader almost 12 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.

Actions #5

Updated by Oliver Hader almost 12 years ago

  • Assignee deleted (Oliver Hader)
Actions #6

Updated by Torben Hansen almost 12 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.

Actions #7

Updated by Kurt Kunig almost 12 years ago

Thank's all, it works now!

Actions #8

Updated by Torben Hansen almost 12 years ago

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

Actions #9

Updated by Kurt Kunig almost 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)

Actions #10

Updated by Torben Hansen almost 12 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 Broens: Can you have a look at this issue and give me some feedback?

Actions #11

Updated by Kurt Kunig almost 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.

Actions #12

Updated by Scanlitho no-lastname-given almost 12 years ago

36541_2.diff works thanks!

Actions #13

Updated by Gerrit Code Review almost 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

Actions #14

Updated by Scanlitho no-lastname-given almost 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?

Actions #15

Updated by Torben Hansen almost 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.

Actions #16

Updated by Gerrit Code Review almost 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

Actions #17

Updated by Kurt Kunig almost 12 years ago

the failure is still in 4.7.1!?

Actions #18

Updated by Georg Ringer almost 12 years ago

otherwise the issue would have been resolved.

please look at the review in gerrit and the comments there

Actions #19

Updated by Steffen Becker almost 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...

Actions #20

Updated by Gerrit Code Review almost 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

Actions #21

Updated by Gerrit Code Review almost 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

Actions #22

Updated by Gerrit Code Review almost 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

Actions #23

Updated by Gerrit Code Review almost 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

Actions #24

Updated by Torben Hansen almost 12 years ago

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

Updated by Riccardo De Contardi over 6 years ago

  • Status changed from Resolved to Closed
Actions

Also available in: Atom PDF