Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Faulty Word Wrap?

    Using Drupal 6, tinymce is the wysiwyg.

    Ordinarily, should work:
    Code:
    <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:
    Code:
    <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>
    Last edited by gr33nman; 03-03-2012 at 01:05 AM.

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    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.

    Code:
    <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

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ARCLite Studio View Post
    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.

    Code:
    <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.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,627
    Thanks
    0
    Thanked 648 Times in 638 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    gr33nman (03-03-2012)

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    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!

  • #6
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Quote Originally Posted by felgall View Post
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •