tag:help-archives.hannonhill.com,2010-02-09:/discussions/how-do-i/11585-wrap-text-around-an-imageCascade CMS: Discussion 2014-04-09T16:16:37Ztag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-24T00:55:34Z2014-04-09T16:16:37Zwrap text around an image<div><p>Did you forget to add the semi-colon at the end of the
"float:right"? In you post you did, just wondering if you copied it
from your code or wrote it. Because that should work...</p>
<hr>
<p><a href="http://metaboliccookingv.com">Metabolic Cooking</a></p></div>briancphytag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-24T14:12:30Z2014-03-24T14:12:30Zwrap text around an image<div><p>Hi,</p>
<p>You mentioned it looks fine in the WYSIWYG, but not after
submitting the page. Can you confirm if either the
<code>align</code> or <code>style</code> attributes are present
within the HTML after submitting?</p>
<p>It sounds as though you may have the <strong>Remove all font
tags and style attributes from word processor content</strong>
content preference enabled, which may be stripping out the inline
styling. Perhaps try either unchecking this preference or uncheck
the Tidy HTML option when submitting to see if that helps out.</p>
<blockquote>
<p>Did you forget to add the semi-colon at the end of the
"float:right"?</p>
</blockquote>
<p>The missing semi-colon from the inline CSS should be fine since
there is only one rule.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T13:59:11Z2014-03-25T13:59:11Zwrap text around an image<div><p>I did not forget the semi-colon when I tried that method, I just
didn't put that in the original post because I was only copying the
current code.</p>
<p>After submitting the page, the attributes were still there. I
copied the code into the post from after the page had been
submitted, so as far as I can see, everything in the code looks
normal. And as I said, the WYSIWYG displayed correctly, just not
the submitted page or the published page.</p>
<p>I don't have the Tidy HTML enabled, but I do have the "Remove
all font tags and style attributes from word processor content"
checked. I don't know why this would be the problem, however,
because as I said, the attributes are still there after submitting
and the code was not produced in a word processor.</p>
<p>Update: I tried disabling the "Remove all font tags and style
attributes from word processor content" anyway and re-submitted the
page (after checking the attributes were still in the code, of
course) and there was no change in the appearance when
submitted.</p></div>Jory Kellertag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T14:05:10Z2014-03-25T14:05:10Zwrap text around an image<div><p>Thank you for following up and confirming.</p>
<blockquote>
<p>After submitting the page, the attributes were still there. I
copied the code into the post from after the page had been
submitted, so as far as I can see, everything in the code looks
normal. And as I said, the WYSIWYG displayed correctly, just not
the submitted page or the published page.</p>
</blockquote>
<p>Going off of this explanation, it sounds as though you have some
CSS applied to the page that is overriding the float/align
attributes on the image. Can you confirm if this is the case using
your browser's inspector?</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T14:19:25Z2014-03-25T14:19:55Zwrap text around an image<div><p>Adding more screenshots.</p>
<p>You'll notice the image is positioned before the h2, because I
wanted it aligned with the heading, but I have also tried moving
after the close tag of the heading and also inside the heading
after the open tag, before the text.</p>
<p>In Firefox's "Inspect Element" I don't see anything overriding
the align, it looks normal to me, but I only have a rudimentary
understanding of HTML and CSS so I would appreciate a second
opinion. The screenshot is the only portion of CSS where "align" or
"float" was mentioned.</p></div>Jory Kellertag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T14:50:27Z2014-03-25T14:50:27Zwrap text around an image<div><p>Thank you for providing the screenshots.</p>
<p>Judging by the Firefox inspection screenshot, I'm thinking the
issue may be related to the image being within the
<code><h2></code> tag, which should be a block level element.
I believe what is occurring is the image is adding to the height of
the heading which could help explain why the paragraph below it
appears to be pushed down.</p>
<p>What did the page look like when you had the image before or
after the heading? Would you be able to provide a link to the
published page so I can take a closer look?</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T14:59:14Z2014-03-25T14:59:14Zwrap text around an image<div><p>I'm not entirely sure what you mean. The image is not currently
within the heading tag but is before it, as is shown in the code
screenshot. Therefore, the heading shouldn't be affecting
it...right?</p>
<p>Here's the page: <a href=
"http://niu.edu/cascade/getting-started/folder-directory.shtml">http://niu.edu/cascade/getting-started/folder-directory.shtml</a></p>
<p>Sorry I didn't include that before; I previously only had it
published on our test server.</p></div>Jory Kellertag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T15:16:34Z2014-03-25T15:16:34Zwrap text around an image<div><p>Thank you for providing the link, Jory, this proved to be very
helpful.</p>
<p>After doing some inspecting, it appears the issue is with the
following CSS in <strong>screen_styles.css</strong> on line 534,
which is causing the paragraph after the image to clear the float
of the image.</p>
<pre>
<code>#mainContent #contentwithleftnav p, #mainContent #contentwithleftnav li {
padding-right: 1em;
clear: right;
}</code>
</pre>
<p>If you remove (or comment out) the <strong>clear:
right;</strong>, the image will float to the right of the paragraph
as expected.</p>
<blockquote>
<p>I'm not entirely sure what you mean. The image is not currently
within the heading tag but is before it, as is shown in the code
screenshot</p>
</blockquote>
<p>My apologies, the <code><img></code> tag within the
<strong>inspect.JPG</strong> image shows the image is within the
heading, but seeing the source code it is not. Perhaps that might
be a Firefox thing, or maybe the screenshot was taken at a
different time.</p>
<p>Please let me know if you have any questions.</p>
<p>Thanks!</p></div>Ryan Griffithtag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-25T15:18:19Z2014-03-25T15:18:19Zwrap text around an image<div><p>Thank you so much. I will try that, and comment again if it
doesn't solve the issue. Thanks!</p></div>Jory Kellertag:help-archives.hannonhill.com,2010-02-09:Comment/322091742014-03-28T17:37:10Z2014-03-28T17:37:10Zwrap text around an image<div><p>Not a problem at all, Jory. Please keep me posted on your
findings.</p>
<p>Thanks!</p></div>Ryan Griffith