PDA

View Full Version : Faulty Word Wrap?



gr33nman
Mar 3rd, 2012, 02:01 AM
Using Drupal 6, tinymce is the wysiwyg.

Ordinarily, should work:

<img src="/path-to-image/State_House_300x196px.jpg"
alt="State House" title="State House" width="300"
height="196" style="border: 0pt none; margin-left: 10px;
float: right;" />
But it's not working now -- sort of. It's only wrapping for the first paragraph. Usually it wraps for everything in the containing div. The problem only seems to come up once in a while. I'd be grateful for some feedback and suggestions as to what's happening. I think it might be an 'input format' thing or a 'tinymce' thing.

This is my page (http://www.productpolicy.org/content/toolkit-state-legislative-advocates).

This is the way it looks in tinymce wysiwyg:
http://farm8.staticflickr.com/7195/6944342649_929219ef54.jpg

This is the way it renders once it's saved: (Arrows show white space.)
http://farm8.staticflickr.com/7188/6947732803_df66949944.jpg

The code looks all right to me:

<p><a href="/ppi/graphics/toolkit/State_House_550x361px.jpg"
title="State House" rel="lightbox">
<img src="/ppi/graphics/toolkit/State_House_300x196px.jpg"
alt="State House" title="State House" width="300" height="196"
style="border: 0pt none; margin-left: 10px; float: right;" /></a>
Information about extended producer responsibility and resources
for campaign initiatives.</p>
<h3><strong><a href="/ppi/PPI_EPR_Starter_Kit_.pdf">EPR Starter
Kit</a></strong></h3>
<p>An excellent resource for advocates or
legislators looking to start EPR campaigns </p>
<h3><strong><a href="/ppi/History%20of%20EPR_in_USA_Canada.pdf">History
of EPR in North America</a> </strong></h3><p>A backgrounder on how EPR
has developed in Canada and the United States </p><h3><strong>
<a href="/content/model-legislation">Model Legislation</a> </strong></h3>
<p>We’ve contributed and analyzed some of the best model legislation
and laws in the United States </p><h3><strong>
<a href="/content/products">Product Resources</a></strong></h3>
<p>Reports, information and contacts related to product-specific EPR legislation</p>
<h3><strong><a href="/content/jobs-and-economic-development">Jobs and
Economic Development</a> </strong></h3><p>Information about the
economic benefits of EPR </p><h3><strong><a href="/content/case-epr">Why
EPR is Needed</a> </strong></h3><p>Information about the advent of the
"throw-away" society, ecological impacts and how EPR is changing
the way we make and use consumer products. </p>
<h3><a href="/content/research ">Research, Fact Sheets
and Presentations</a></h3><p>Cutting-edge research
and resources to support EPR campaigns.</p>

ARCLite Studio
Mar 3rd, 2012, 05:26 AM
Try removing the FLOAT:RIGHT from the inline style and use ( align="right" ) instead. The CSS float method was never intended to be used as a wordwrap function around images. Also if you use the align right, you should make the image the first item of code in that particular DIV or Paragraph.



<img src="/ppi/graphics/toolkit/State_House_300x196px.jpg"
alt="State House" title="State House" width="300" height="196"
style="border: 0pt none; margin-left: 10px;" align="right" />



ARCLite Studio

gr33nman
Mar 3rd, 2012, 06:08 AM
Try removing the FLOAT:RIGHT from the inline style and use ( align="right" ) instead. The CSS float method was never intended to be used as a wordwrap function around images. Also if you use the align right, you should make the image the first item of code in that particular DIV or Paragraph.



<img src="/ppi/graphics/toolkit/State_House_300x196px.jpg"
alt="State House" title="State House" width="300" height="196"
style="border: 0pt none; margin-left: 10px;" align="right" />



ARCLite Studio Thanks for your reply, ARCLite Studio.
I've made the change as suggested. (Please feel free to view it in source.) It was one of the things I'd originally tried. I've had reasonable success with styles to align right in drupal since the wysiwyg interface seems to prefer it, but not this time. I am again still at a loss for what is going on. It's a puzzler...

Again, thanks for your suggestion.

felgall
Mar 3rd, 2012, 07:20 AM
align="right" was deleted from HTML in 1997.

Your problem is almost certainly going to be the CSS that is being applied to <h3> tags - it probably has clear : all attached to that tag which is clearing the float and forcing that code down.

It is probably being assigned in the main styles for the entire page and the preview isn't including that CSS.

gr33nman
Mar 3rd, 2012, 11:31 PM
align="right" was deleted from HTML in 1997.

Your problem is almost certainly going to be the CSS that is being applied to <h3> tags - it probably has clear : all attached to that tag which is clearing the float and forcing that code down.

It is probably being assigned in the main styles for the entire page and the preview isn't including that CSS.You hit it almost square on the head. It was set to the <h3> was set {display: block} in the default style sheet. I changed it to {display: inline} in appearance.css and now everything works as expected.

Thank you so much!

ARCLite Studio
Mar 4th, 2012, 01:34 AM
align="right" was deleted from HTML in 1997.

1.) "Depreciated", not deleted (http://www.w3.org/TR/html401/struct/objects.html#adef-align-IMG)
2.) Gave the OP a quick, functional Resolution. Wasn't really trying to conform to 4.01 Strict.

OP - Glad you got it worked out either way.