[TYPO3] How can I define a max width for inserted content?

[Christopher Torgalson]

Hi,

On Sun, Jun 22, 2008 at 9:25 PM, Christopher
<Christopher at temporaryforwarding.com> wrote:
> Hi Tapio,
>
> "Tapio Markula" <tapio.markula at xetpoint.fi> schrieb im Newsbeitrag
> news:mailman.1.1214155685.6001.typo3-english at lists.netfielders.de...
>> Christopher kirjoitti:
>>> Hi,
>>>
>>> I have inserted a table from Microsoft Word in the RTE-window.
>>> The table it is to broad for my frontend.
>>> For pictures I know that there is a possibility to enter the maxWidth of
>>> a block; is there something similar for tables?
>>>
>>> Or any other possiblity to give them a binding maximum width?
>>>
>>
>> Table is a html element and it depends on browsers, how they handle CSS
>> and html.
>> Even if there would be possible to set some TS to set style attribute,
>> that could work because it would be *impossible* to calculate, how wide
>> the final table would be.
>
> A simple table style="width: 558px;" (for example) would do the job.
>
> BUT it also would be great if the options the RTE offers would be available
> (width of the table in percent or pixels).
> That would not be the case if one standard-value for all tables was set.
>
> The point is: The width should be adjustable, but it should NEVER be more
> than ... lets say those 558 px.


You already have a number of possible options using CSS without
changing the RTE in any way. Three possibilities suggest themselves
immediately (there are undoubtedly others):

Solution 1: CSS only
----------------------------------------
Your RTE content elements will exist in some HTML element. If that
element does not have an id attribute, add one and then take care of
this in your stylesheet(s). If, for example, the relevant element is a
div with the id "container", the following code should take care of it
in most cases [1]. This won't solve the problem if the issue is with
long words in td elements forcing the table to be wider than the
permissible width, but if that's the case, the RTE couldn't do much
either:

/*
In your main stylesheet:
[note that IE7 sometimes gets max-width wrong]
*/
div#container table { max-width:558px; }

/*
In a stylesheet ONLY for IE versions < 7:
[be warned, IE 6 and lower handle 'width' like 'min-width']
*/
div#container table { width:558px; }


Solution 2: CSS + TSconfig 1
----------------------------------------
Configure the RTE with one or more classes that can be applied to
table elements to 'tame' their widths.

Solution 3: CSS + TSconfig 2
----------------------------------------
Set up a 'wrapper' in the "Frame" selector of the Text content element
in TYPO3 that wraps the tables in a div; then, add something like the
following to your stylesheet (assumes same markup as Solution 1):

div#container div { overflow:scroll; }


[1] This will depend on whether the useragent in question implements
CSS 2 or CSS 2.1. As far as I know, all the major useragents that
support max-width *at all* support 2.1 more or less. Ymmv.

-- 
Christopher Torgalson
http://www.typo3apprentice.com/