SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with IE6 DIVS displaying in NS 4.x - help??

    Hello everyone,

    I developed content management system that includes a WYSIWYG editor for 'news stories'.

    Anyway, I use the <DIV> tag for this one in order to move photos etc around using drag and drop when editing a news story. The story editing takes place through IE 6. Bascially, I only need to be able to align the photos left or right in the news story. The story is saved in a MySQL database. Just to note I'm using the following javscript to actually insert the image into the div layer of a parent window :

    window.opener.document.execCommand("InsertImage",false,ImageName);
    window.opener.document.execCommand("InsertImage",true,ImageName);

    I have to use both of these, the first actually inserts the image (it doesn't position the image at all), the second does a popup box where I can set the image alignment etc of the inserted image. (this took a while to figure out!)


    Next, when I display a news story on the site, well, IE displays the story properly, however, NS 4.x will overlap images on top of the text.

    Would using relative vs absolute positioning in the WYSIWYG editor fix this problem? Is there something I can set that will cause IE 6 to use standard HTML positioning tags such as <IMG srce="xxx.gif" align="left" when inserting a photo into a layer?

    Would it be better just to have the script that displays the story on the site convert the DHTML positioning tags of the photos (in the story) into standard HTML's <img src="xxx.gif" align="left"> or align="right" ?

    Btw, the WYSIWYG editor is built using Javscript, DHTML and PHP.

    Just curious.
    Last edited by holmescreek; May 26, 2002 at 10:14.

  2. #2
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It sounds like you've hit on the limitations of IE's built in editor component - the HTML it generates is revolting. There isn't much you can do to change how it is generated, so your best bet is to clear it up with regular expressions either client side in the javascript or server side once the form has been posted. Unfortunately this aproach leaves you vulnerable to changes in the MSHTML implementation (if for examples IE7 generates slightly different HTML your regular expressions will stop working).

  3. #3
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skunk,

    I actually discovered the problem after a couple of hours of constantly removing a line of code, testing, removing a line of code etc.


    It seems that in any HTML document that if insert an image and use the style= tag netscape hates it! A couple of articles mentioned moving the img tag outside of any <P> blocks ... this doens't work.

    The window.opener.document.execCommand("InsertImage",true,ImageName); in my code by default inserts the image and inserts the style= tag.

    My quick fix?

    Well, IE displays the news articles properly, again, netscape cause the image to overlap my text. So, how do I go about just removing the style= tag? from all the <img> tags?


    Simple, with PHP (you can do with java as well)

    $article = str_replace("style=","@style=",$article);

    echo($article);


    This changes :

    <IMG style="WIDTH: 216px; HEIGHT: 321px" alt="Hello World" src="rainbow01.jpg" align="right" border=0>

    to this :

    <IMG @style="WIDTH: 216px; HEIGHT: 321px" alt="Hello World" src="rainbow01.jpg" align="right" border=0>


    In short, both browsers will ignore the tag if the @ is placed in front of it.

    -->
    I thought of parsing out the style tag and convert it to <img src="something" width="216" height="321"> however, the execCommand("Insertimage" ... usually adds some random spaces to the style tag, for instance style="WIDTH: 216px; HEIGHT: 321px "

    Any quick idea of how to parse this out, since the spacing in the quotes varies, would be appreciated!
    <--

    I had a difficult time with no luck scouring the web for this solution, so I will probably post this tip a seperate article.
    Last edited by holmescreek; May 26, 2002 at 12:43.

  4. #4
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,066
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice solution

    You should be able to kill off style="" tags with a regular expression. In english, what you want to look for and remove is:

    style="[one or more characters that are NOT a double quote]"

    Here's a regular expression that might do the trick:
    Code:
    $article = ereg_replace ('style="[^"]+"', '', $article);
    I haven't tested this but it should work. A good basic refernce for PHP regular expressions can be found in the 4th user comment on the ereg PHP manual page: www.php.net/ereg

  5. #5
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, think I need to brush up a little on reg expressions anyways. Thanks for the tip and link.


Bookmarks

Posting Permissions

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