<!-- 
RSS generated by JIRA (9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b) at Mon Feb 12 07:25:53 CET 2024

It is possible to restrict the fields that are returned in this document by specifying the 'field' parameter in your request.
For example, to request only the issue key and summary append 'field=key&field=summary' to the URL of your request.
-->
<rss version="0.92" >
<channel>
    <title>Magnolia - Issue tracker</title>
    <link>https://jira.magnolia-cms.com</link>
    <description>This file is an XML representation of an issue</description>
    <language>en-uk</language>    <build-info>
        <version>9.4.2</version>
        <build-number>940002</build-number>
        <build-date>19-01-2023</build-date>
    </build-info>


<item>
            <title>[MGNLSTK-321] Text Image Paragraph in article renders incorrectly if text is too short</title>
                <link>https://jira.magnolia-cms.com/browse/MGNLSTK-321</link>
                <project id="10287" key="MGNLSTK">Magnolia Standard Templating Kit (closed)</project>
                    <description>&lt;p&gt;If you create a new article with a text / Image p and a short text, such that the image is left of the text (default), then the following new bar will be to the right of the image, not below; as will the subsequent paragraph once created. For instance, if you create a quote, it will overly the image of the preceding text/image p.&lt;/p&gt;

&lt;p&gt;See attached screenshot.&lt;/p&gt;

&lt;p&gt;I consider this issue minor as an article will normally have more text and you can work around it by selecting &quot;image above text&quot;.&lt;/p&gt;</description>
                <environment>4.0 RC 4</environment>
        <key id="16296">MGNLSTK-321</key>
            <summary>Text Image Paragraph in article renders incorrectly if text is too short</summary>
                <type id="1" iconUrl="https://jira.magnolia-cms.com/secure/viewavatar?size=xsmall&amp;avatarId=10883&amp;avatarType=issuetype">Bug</type>
                                            <priority id="4" iconUrl="https://jira.magnolia-cms.com/images/icons/priorities/minor.svg">Minor</priority>
                        <status id="6" iconUrl="https://jira.magnolia-cms.com/images/icons/statuses/closed.png" description="The issue is considered finished, the resolution is correct. Issues which are not closed can be reopened.">Closed</status>
                    <statusCategory id="3" key="done" colorName="success"/>
                                    <resolution id="10000">Won&apos;t Do</resolution>
                                        <assignee username="pbaerfuss">Philipp B&#228;rfuss</assignee>
                                    <reporter username="kraft">Boris Kraft</reporter>
                        <labels>
                    </labels>
                <created>Sat, 7 Mar 2009 11:56:42 +0100</created>
                <updated>Wed, 4 Nov 2015 15:43:34 +0100</updated>
                            <resolved>Wed, 4 Nov 2015 15:43:34 +0100</resolved>
                                                                        <due></due>
                            <votes>1</votes>
                                    <watches>2</watches>
                                                                                                                <comments>
                            <comment id="30439" author="mderting" created="Sun, 17 Oct 2010 18:19:36 +0200"  >&lt;p&gt;Hi,&lt;/p&gt;

&lt;p&gt;As this is an issue that is related to how floats are cleared, I would like to suggest using &lt;tt&gt;clearfix&lt;/tt&gt; (&lt;a href=&quot;http://www.webtoolkit.info/css-clearfix.html&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;http://www.webtoolkit.info/css-clearfix.html&lt;/a&gt;) on paragraphs. I think this would solve this issue, as well as other display issues throughout the STK. It would also allow us to get rid of many of the &lt;tt&gt;position:relative&lt;/tt&gt; and &lt;tt&gt;overflow:hidden&lt;/tt&gt; rules in the CSS. &lt;/p&gt;

&lt;p&gt;Thoughts?&lt;/p&gt;

&lt;p&gt;Thanks,&lt;br/&gt;
Matt&lt;/p&gt;</comment>
                            <comment id="30443" author="weder" created="Mon, 18 Oct 2010 10:40:11 +0200"  >&lt;p&gt;Wouldn&apos;t it be enough to just set the &quot;clear&quot; attribute for basically any paragraph?&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://www.w3schools.com/css/pr_class_clear.asp&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;http://www.w3schools.com/css/pr_class_clear.asp&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;i.e. e.g. &amp;lt;p style=&quot;clear:both&quot;&amp;gt;text below the text image paragraph&amp;lt;/p&amp;gt;&lt;/p&gt;

&lt;p&gt;This requires the next element to start on a new line, not taking over any left-over space from the element above.&lt;/p&gt;</comment>
                            <comment id="30490" author="mderting" created="Tue, 19 Oct 2010 19:25:49 +0200"  >&lt;p&gt;Hi Andreas,&lt;/p&gt;

&lt;p&gt;In the specific example shown in the screenshot above, adding a &lt;tt&gt;clear:both&lt;/tt&gt; rule to &lt;tt&gt;styles.css&lt;/tt&gt; within the &lt;tt&gt;.text blockquote&lt;/tt&gt; selector would be enough.  As a starting point, below is an example of the current markup from the demo-project&apos;s &lt;a href=&quot;http://demoauthor.magnolia-cms.com/demo-project/about/subsection-articles/large-article.html&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Article with TOC page&lt;/a&gt; (HTML comments added by me).&lt;/p&gt;

&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeHeader panelHeader&quot; style=&quot;border-bottom-width: 1px;background-color: #FFFFCE;&quot;&gt;&lt;b&gt;Text and Image Paragraph in Main, followed by blockquote&lt;/b&gt;&lt;/div&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-xml&quot;&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;text&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    ...
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;h2 id=&lt;span class=&quot;code-quote&quot;&gt;&quot;jump2&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Second Sub-Heading&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
    
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- This element is floated left --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dl class=&lt;span class=&quot;code-quote&quot;&gt;&quot;photo&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dt&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;img src=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; alt=&lt;span class=&quot;code-quote&quot;&gt;&quot;A metal lamp hanging from the ceiling&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dt&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;zoom&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; title=&lt;span class=&quot;code-quote&quot;&gt;&quot;Zoom on this image&quot;&lt;/span&gt; rel=&lt;span class=&quot;code-quote&quot;&gt;&quot;showbox&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Zoom&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;caption&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;copyright&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Magnolia International AG&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;longdesc&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling in front of a green wall. &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dl&amp;gt;&lt;/span&gt;
    
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- The ul has been removed so that the content is not longer than the floated dl.photo element --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;blockquote&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;cite&amp;gt;&lt;/span&gt;A. Miller&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/cite&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/blockquote&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    ...
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;But we don&apos;t always have an element like &lt;tt&gt;blockquote&lt;/tt&gt; as a hook to attach a &lt;tt&gt;clear:both&lt;/tt&gt; rule to. For example, if we move the Link List Paragraph at the end of the page up above the &lt;tt&gt;blockquote&lt;/tt&gt;, we would have the following:&lt;/p&gt;

&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeHeader panelHeader&quot; style=&quot;border-bottom-width: 1px;background-color: #FFFFCE;&quot;&gt;&lt;b&gt;Text and Image Paragraph in Main, followed by Link List&lt;/b&gt;&lt;/div&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-xml&quot;&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;text&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    ...
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;h2 id=&lt;span class=&quot;code-quote&quot;&gt;&quot;jump2&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Second Sub-Heading&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
    
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- This element is floated left --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dl class=&lt;span class=&quot;code-quote&quot;&gt;&quot;photo&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dt&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;img src=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; alt=&lt;span class=&quot;code-quote&quot;&gt;&quot;A metal lamp hanging from the ceiling&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dt&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;zoom&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; title=&lt;span class=&quot;code-quote&quot;&gt;&quot;Zoom on this image&quot;&lt;/span&gt; rel=&lt;span class=&quot;code-quote&quot;&gt;&quot;showbox&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Zoom&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;caption&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;copyright&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Magnolia International AG&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;longdesc&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling in front of a green wall. &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dl&amp;gt;&lt;/span&gt;
    
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF LINK LIST PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
	&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;links&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;h2 id=&lt;span class=&quot;code-quote&quot;&gt;&quot;jump3&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Third Sub-Heading - Further Links&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
	        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;
	            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/demo-project/about/subsection-articles/article.html&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Standard Article&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
	        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
	        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;li class=&lt;span class=&quot;code-quote&quot;&gt;&quot;download&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Magnolia Flyer 4.0 &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;em&amp;gt;&lt;/span&gt;(PDF, 129 KB)&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/em&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
	        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
	&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
	&lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF LINK LIST PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;blockquote&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;cite&amp;gt;&lt;/span&gt;A. Miller&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/cite&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/blockquote&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    ...
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Notice the Link List is now to the right of the image, and appears to be part of the Text and Image paragraph.  Admittedly, it doesn&apos;t look particularly awful in this case, but was probably not what the author had in mind.  If we add some content to the paragraph, we may also notice that the link list items wrap around the image, as shown in this screenshot.&lt;br/&gt;
&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/13830/13830_text-image-link-list-screen-shot.png&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;To remedy this situation, and many others like it, what I&apos;m proposing is to contain the Text and Image paragraph in a &lt;tt&gt;div&lt;/tt&gt; element, and then add class &lt;tt&gt;clearfix&lt;/tt&gt; to the container to expand the container around any floated elements.  Without the &lt;tt&gt;clearfix&lt;/tt&gt; class, the container &lt;tt&gt;div&lt;/tt&gt; would not enclose any floated child elements.  As can be seen in the example image from the &lt;a href=&quot;http://www.positioniseverything.net/easyclearing.html&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;original &lt;tt&gt;clearfix&lt;/tt&gt; article&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;http://www.positioniseverything.net/articles/images/clear-box.gif&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;


&lt;p&gt;For other paragraphs that already have a containing element, &lt;tt&gt;clearfix&lt;/tt&gt; can be added to their &lt;tt&gt;class&lt;/tt&gt; attribute to ensure they properly contain any floated child elements.&lt;/p&gt;

&lt;p&gt;In the case of the Text and Image paragraph example we&apos;ve been using, the markup would now look like this:&lt;/p&gt;

&lt;div class=&quot;code panel&quot; style=&quot;border-width: 1px;&quot;&gt;&lt;div class=&quot;codeHeader panelHeader&quot; style=&quot;border-bottom-width: 1px;background-color: #FFFFCE;&quot;&gt;&lt;b&gt;Text and Image Paragraph in Main, followed by Link List&lt;/b&gt;&lt;/div&gt;&lt;div class=&quot;codeContent panelContent&quot;&gt;
&lt;pre class=&quot;code-xml&quot;&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;text&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
    ...
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;clearfix&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;h2 id=&lt;span class=&quot;code-quote&quot;&gt;&quot;jump2&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Second Sub-Heading&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
    
        &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- This element is floated left --&amp;gt;&lt;/span&gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dl class=&lt;span class=&quot;code-quote&quot;&gt;&quot;photo&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dt&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;img src=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/content-small/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; alt=&lt;span class=&quot;code-quote&quot;&gt;&quot;A metal lamp hanging from the ceiling&quot;&lt;/span&gt; /&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dt&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;zoom&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/.imaging/stk/demo-project/zoom/dms/demo-project/img/opener/lamp-with-green-background/document/lamp with green background 588x368&quot;&lt;/span&gt; title=&lt;span class=&quot;code-quote&quot;&gt;&quot;Zoom on this image&quot;&lt;/span&gt; rel=&lt;span class=&quot;code-quote&quot;&gt;&quot;showbox&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Zoom&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;caption&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;copyright&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Magnolia International AG&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;dd class=&lt;span class=&quot;code-quote&quot;&gt;&quot;longdesc&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;A metal lamp hanging from the ceiling in front of a green wall. &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dd&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/dl&amp;gt;&lt;/span&gt;
    
    	&lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- The content of this paragraph has been shortened so that it is not longer than the floated dl.photo element --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    	&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF TEXT AND IMAGE PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF LINK LIST PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;div class=&lt;span class=&quot;code-quote&quot;&gt;&quot;links&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
	&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;h2 id=&lt;span class=&quot;code-quote&quot;&gt;&quot;jump3&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Third Sub-Heading - Further Links&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/h2&amp;gt;&lt;/span&gt;
	&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;ul&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;li&amp;gt;&lt;/span&gt;
	        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/demo-project/about/subsection-articles/article.html&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Standard Article&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;li class=&lt;span class=&quot;code-quote&quot;&gt;&quot;download&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;
                &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;a href=&lt;span class=&quot;code-quote&quot;&gt;&quot;/demo-project/dms/demo-project/downloads/Magnolia_Flyer_4-0/Magnolia%20Flyer%204.0.pdf&quot;&lt;/span&gt;&amp;gt;&lt;/span&gt;Magnolia Flyer 4.0 &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;em&amp;gt;&lt;/span&gt;(PDF, 129 KB)&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/em&amp;gt;&lt;/span&gt;&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/a&amp;gt;&lt;/span&gt;
	    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/li&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/ul&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF LINK LIST PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;

    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- START OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- Currently, no clearing is on this element, the effect shown in the screenshot will be seen.  If we add clear:both to the .text blockquote selector in styles.css than it will be cleared. However, what happens if it is not a blockquote element that comes next? --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;blockquote&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Ein Zitat. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;p&amp;gt;&lt;/span&gt;
            &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;cite&amp;gt;&lt;/span&gt;A. Miller&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/cite&amp;gt;&lt;/span&gt;
        &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/blockquote&amp;gt;&lt;/span&gt;
    &lt;span class=&quot;code-tag&quot;&gt;&lt;span class=&quot;code-comment&quot;&gt;&amp;lt;!-- END OF QUOTED TEXT PARAGRAPH --&amp;gt;&lt;/span&gt;&lt;/span&gt;
    ...
&lt;span class=&quot;code-tag&quot;&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;/pre&gt;
&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And here&apos;s a screenshot of how it would be rendered:&lt;/p&gt;

&lt;p&gt;&lt;span class=&quot;image-wrap&quot; style=&quot;&quot;&gt;&lt;img src=&quot;https://jira.magnolia-cms.com/secure/attachment/13831/13831_text-image-link-list-screen-shot-fix.png&quot; style=&quot;border: 0px solid black&quot; /&gt;&lt;/span&gt;&lt;/p&gt;

&lt;p&gt;Note: This is just one example.  There are other approaches to self-clearing containing elements, such as using &lt;tt&gt;overflow:hidden&lt;/tt&gt; (which is the current STK approach) or &lt;tt&gt;overflow:auto&lt;/tt&gt; but IMHO, the &lt;tt&gt;overflow&lt;/tt&gt; methods introduce some pretty nasty gotchas, especially if you still need to support IE6.  In addition, the overflow clearing methods react very strangely when using negative margins. Another issue with the &lt;tt&gt;overflow&lt;/tt&gt; method is that it clips relatively position elements.&lt;/p&gt;

&lt;p&gt;Please also note that there&apos;s been some &lt;a href=&quot;http://perishablepress.com/press/2009/12/06/new-clearfix-hack/&quot; class=&quot;external-link&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;improvements made to the &lt;tt&gt;clearfix&lt;/tt&gt; method&lt;/a&gt;.&lt;/p&gt;


&lt;p&gt;Ok, that was really long, I apologize.  I hope that helps explain my thinking a bit.&lt;/p&gt;

&lt;p&gt;Thanks,&lt;br/&gt;
Matt&lt;/p&gt;</comment>
                            <comment id="30558" author="timowirth" created="Fri, 22 Oct 2010 11:15:04 +0200"  >&lt;p&gt;Hey Matt, +&lt;/p&gt;

&lt;p&gt;Some thoughts on your ideas&lt;/p&gt;

&lt;p&gt;1) My first thought: a class clearfix looks very ugly and feels like 2003&lt;/p&gt;

&lt;p&gt;2) Second thought: if the class is in you cannot remove it&lt;/p&gt;

&lt;p&gt;3) to have a div class=&quot;text-block&quot; for a text / image paragraph can be very handy. we did this in some projects&lt;/p&gt;

&lt;p&gt;4) thoughts on clearing / containing floats in general &lt;/p&gt;

&lt;p&gt;what possibilies do we have? pro &amp;amp; cons&lt;/p&gt;

&lt;p&gt;a) float everthing&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; easy &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; you cannot use magin auto anymore&lt;/p&gt;

&lt;p&gt;b) overflow: hidden &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; solid and easy&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; easy to maintain&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; the overflow is hidden: you cannot move elements outside. It&apos;s not possible to use &lt;br/&gt;
box-shadow anymore&lt;/p&gt;

&lt;p&gt;c)  :after &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; very modern&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; often used as a bundle at the beginning of css to save code&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; not visible in firebug&lt;/p&gt;
</comment>
                            <comment id="30587" author="mderting" created="Fri, 22 Oct 2010 18:36:28 +0200"  >&lt;p&gt;Hi Timo, +&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;1) My first thought: a class clearfix looks very ugly and feels like 2003&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;I agree it looks very ugly.  But historically speaking it was 2004 &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/wink.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;2) Second thought: if the class is in you cannot remove it&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;Yes, unless its assigned within a &lt;tt&gt;divClass&lt;/tt&gt; property in the Paragraph Definition&apos;s parameters. But that&apos;s not pretty.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;3) to have a div class=&quot;text-block&quot; for a text / image paragraph can be very handy. we did this in some projects&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;Agreed, this would solve most issues.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;4) thoughts on clearing / containing floats in general&lt;/p&gt;


&lt;p&gt;what possibilies do we have? pro &amp;amp; cons&lt;/p&gt;

&lt;p&gt;a) float everthing&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; easy &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; you cannot use magin auto anymore&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;I&apos;m not a fan of this approach, I really like &lt;tt&gt;margin:0 auto;&lt;/tt&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;b) overflow: hidden &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; solid and easy&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; easy to maintain&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; the overflow is hidden: you cannot move elements outside. It&apos;s not possible to use &lt;br/&gt;
box-shadow anymore&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;I&apos;m really liking &lt;tt&gt;box-shadow&lt;/tt&gt;, be ashamed not to use it.  Also, negative margins are useful sometimes.&lt;/p&gt;

&lt;p&gt;I admit, it is a clean approach, at least as far as mark-up is concerned.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;c) :after &lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/add.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; very modern&lt;br/&gt;
&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/forbidden.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; often used as a bundle at the beginning of css to save code&lt;br/&gt;
 not visible in firebug&lt;/p&gt;&lt;/blockquote&gt;

&lt;p&gt;&lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/lightbulb_on.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt; Go on! You&apos;ve peaked my interests.  &lt;img class=&quot;emoticon&quot; src=&quot;https://jira.magnolia-cms.com/images/icons/emoticons/smile.png&quot; height=&quot;16&quot; width=&quot;16&quot; align=&quot;absmiddle&quot; alt=&quot;&quot; border=&quot;0&quot;/&gt;&lt;br/&gt;
What can be done for those of us who still need to support IE6?&lt;/p&gt;

&lt;p&gt;Thanks so much for your thoughts on this.  I really appreciate discussing them with you.&lt;/p&gt;

&lt;p&gt;Thanks,&lt;br/&gt;
Matt.&lt;/p&gt;</comment>
                            <comment id="116445" author="mmuehlebach" created="Wed, 4 Nov 2015 15:43:34 +0100"  >&lt;p&gt;Given the thousands of other issues we have open that are more highly requested, we won&apos;t be able to address this issue in the foreseeable future. Instead we will focus on issues with a higher impact, and more votes.&lt;br/&gt;
Thanks for taking the time to raise this issue. As you are no doubt aware this issue has been on our backlog for some time now with very little movement.&lt;br/&gt;
I&apos;m going to close this to set expectations so the issue doesn&apos;t stay open for years with few updates. If the issue is still relevant please feel free to reopen it or create a new issue.&lt;/p&gt;</comment>
                    </comments>
                    <attachments>
                            <attachment id="12204" name="Text image paragraph overlay issue.jpg" size="104706" author="kraft" created="Sat, 7 Mar 2009 11:56:42 +0100"/>
                            <attachment id="13831" name="text-image-link-list-screen-shot-fix.png" size="88274" author="mderting" created="Tue, 19 Oct 2010 19:26:43 +0200"/>
                            <attachment id="13830" name="text-image-link-list-screen-shot.png" size="87417" author="mderting" created="Tue, 19 Oct 2010 19:26:43 +0200"/>
                    </attachments>
                <subtasks>
                    </subtasks>
                <customfields>
                                                                            <customfield id="customfield_14166" key="com.okapya.jira.checklist:checklist">
                        <customfieldname>Acceptance criteria</customfieldname>
                        <customfieldvalues>
                            
        <checklist>
        <![CDATA[
                            




                
                                    <div class="o-completion" style="display: flex; flex-shrink: 0;"><span  class="aui-lozenge aui-lozenge-complete" style="font-size: 12px; font-weight: normal; display: flex; flex-direction: row; align-items: center;" ><span style="padding-right: 4px; vertical-align: middle;"><svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="white"><path clip-rule="evenodd" d="m10.41037,3.42544l-7.86501,0c-0.72395,0 -1.31084,0.58688 -1.31084,1.31084l0,7.86508c0,0.7239 0.58689,1.3108 1.31084,1.3108l7.86501,0c0.724,0 1.3109,-0.5869 1.3109,-1.3108l0,-7.86508c0,-0.72396 -0.5869,-1.31084 -1.3109,-1.31084zm-7.86501,-0.65542c-1.08593,0 -1.96626,0.88032 -1.96626,1.96626l0,7.86508c0,1.0859 0.88033,1.9662 1.96626,1.9662l7.86501,0c1.086,0 1.9663,-0.8803 1.9663,-1.9662l0,-7.86508c0,-1.08594 -0.8803,-1.96626 -1.9663,-1.96626l-7.86501,0z" fill-rule="evenodd"/><path d="m5.09049,10.18526l-1.82767,-1.82766l-0.78479,0.78479l2.61246,2.61246l5.38758,-5.38754l-0.78483,-0.78479l-4.60275,4.60274z"/></svg></span><span>Empty</span></span></div>
                        ]]>
    </checklist>


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <customfield id="customfield_10111" key="com.atlassian.jira.toolkit:reporterdomain">
                        <customfieldname>Company</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>magnolia-cms.com</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_10031" key="com.atlassian.jira.ext.charting:firstresponsedate">
                        <customfieldname>Date of First Response</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>Sun, 17 Oct 2010 18:19:36 +0200</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_12730" key="com.atlassian.jira.plugins.jira-development-integration-plugin:devsummary">
                        <customfieldname>Development</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_14151" key="com.atlassian.jira.toolkit:message">
                        <customfieldname>Docu info</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            <customfield id="customfield_10061" key="com.atlassian.jira.toolkit:lastusercommented">
                        <customfieldname>Last comm is not jira-dev</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>true</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10071" key="com.atlassian.jira.toolkit:lastupdaterorcommenter">
                        <customfieldname>Last participant</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>mmuehlebach</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_13136" key="com.atlassian.jira.toolkit:LastCommentDate">
                        <customfieldname>Last public comment date</customfieldname>
                        <customfieldvalues>
                            8 years, 15 weeks, 4 days ago
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                            <customfield id="customfield_10020" key="com.atlassian.jira.toolkit:attachments">
                        <customfieldname>Number of attachments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>3.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10150" key="com.atlassian.jira.toolkit:comments">
                        <customfieldname>Number of comments</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>6.0</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        <customfield id="customfield_10011" key="com.atlassian.jira.toolkit:participants">
                        <customfieldname>Participants</customfieldname>
                        <customfieldvalues>
                                        <customfieldvalue>weder</customfieldvalue>
            <customfieldvalue>kraft</customfieldvalue>
            <customfieldvalue>mderting</customfieldvalue>
            <customfieldvalue>mmuehlebach</customfieldvalue>
            <customfieldvalue>pbaerfuss</customfieldvalue>
            <customfieldvalue>timowirth</customfieldvalue>
    
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                    <customfield id="customfield_10833" key="com.pyxis.greenhopper.jira:gh-lexo-rank">
                        <customfieldname>Rank</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0|i02kin:</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10244" key="com.pyxis.greenhopper.jira:gh-global-rank">
                        <customfieldname>Rank (Obsolete)</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>15062</customfieldvalue>
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <customfield id="customfield_14145" key="com.intenso.jira.issue-templates:issue-templates-customfield">
                        <customfieldname>Template</customfieldname>
                        <customfieldvalues>
                            


                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                <customfield id="customfield_15131" key="com.onresolve.jira.groovy.groovyrunner:scripted-field">
                        <customfieldname>Time in Discovery</customfieldname>
                        <customfieldvalues>
                            <customfieldvalue>0</customfieldvalue>

                        </customfieldvalues>
                    </customfield>
                                                                <customfield id="customfield_10032" key="com.atlassian.jira.ext.charting:timeinstatus">
                        <customfieldname>Time in Status</customfieldname>
                        <customfieldvalues>
                            
                        </customfieldvalues>
                    </customfield>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        </customfields>
    </item>
</channel>
</rss>