Faulty Word Wrap?

[gr33nman]

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.

This is the way it looks in tinymce wysiwyg:


This is the way it renders once it's saved: (Arrows show white space.)


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]

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]

Originally Posted by ARCLite Studio

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]

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]

Originally Posted by felgall

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]

Originally Posted by felgall

align="right" was deleted from HTML in 1997.

1.) "Depreciated", not deleted
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.