Bug #36541: in css hard-coded margin-left (or right) of 510px for "csc-textpic-text" in layout 25 and 26 - TYPO3 Core - TYPO3 Forge

Actions

Copy link

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 13 years ago. Updated over 7 years ago.

Status:

Closed

Priority:

Must have

Assignee:

Category:

Frontend

Target version:

4.7.1

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

Download all 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 open — 3 closed)

Actions

Copy link

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

Copy link

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

Copy link

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

Copy link

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

Copy link

Updated by Oliver Hader almost 13 years ago

Assignee deleted (~~Oliver Hader~~)

Actions

Copy link

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

Actions

Copy link

Updated by Kurt Kunig almost 13 years ago

Thank's all, it works now!

Actions

Copy link

Updated by Torben Hansen almost 13 years ago

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

Actions

Copy link

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

Copy link

#10

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

Actions

Copy link

#11

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

Copy link

#12

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

36541_2.diff works thanks!

Actions

Copy link

#13

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

Copy link

#14

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

Copy link

#15

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

Copy link

#16

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

Copy link

#17

Updated by Kurt Kunig almost 13 years ago

the failure is still in 4.7.1!?

Actions

Copy link

#18

Updated by Georg Ringer almost 13 years ago

otherwise the issue would have been resolved.

please look at the review in gerrit and the comments there

Actions

Copy link

#19

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

Copy link

#20