I discovered this after building a WYSIWYG news story editor -- which when the article is displayed on my website it looks great in IE, however, Netscape 4 will cause images and text to overlap.

How to prevent images from overlapping text in Netscape 4.x (and other older browsers)

After building a WYSIWYG content management system using DHTML (running under IE6) I later found that when viewing the news story in Netscape 4.x the images would overlap the text. I was sure that when inserting images into my stories that IE 6 was somehow at fault by inserting some type of code not supported by Netscape. After hours of scouring the web for information on the subject, without success, I decided to create a blank document, insert a sample news story created by IE6 and tearing it apart line by line.

A SIMPLE SOLUTION FOR ANY DOCUMENT

Several articles I read on the web suggested keeping the <img> tag outside of <P> tags and went as far to claim that styles sheets should be created for different browsers. Hey, what can I say? Programmers hate extra work.

My findings : Netscape simply hates it when you insert a style="" tag inside of in <img> tag.

This example displays properly in IE, however, the image will overlap the text in Netscape 4.x :

<P><IMG style="WIDTH: 216px; HEIGHT: 321px" alt="Hello World" src="myimage.jpg" align="right" border=0>BROWSER TEST</P>

However, removing the style="WIDTH: ..." tag will cause Netscape to overlap the documents text with the image!


-> PHP/JAVASCRIPT/DHTML DEVELOPERS READ BELOW <-

FOR THOSE INSERTING IMAGES INTO <DIV> LAYERS

Lets get back to my WYSIWYG story editor. My story editor uses javascript to insert images into a <DIV> layer. The code is as follows :

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


The first line inserts the image ( ImageName ) into the parent windows <DIV> layer. The second line causes a pop-up dialog to appear that allows you to specify the width, height, alignment etc of the image. By default, when the image is inserted the style="" tag is added to the image. So, back the the problem, when the story is displayed on a web page IE will display it fine, however, the style tag mucks up Netscape 4.x

My solutions?

After the image is inserted into the parent documents <DIV> layer simply use PHP to str_replace style="width:..." with "@style="width:...".

By replacing style with @style, all browsers will ignore the style tag all together -- including the notorious Netscape 4.x

php example : $body = str_replace("style=","@style=",$body);



holmescreek@holmescreek.com
http://www.holmescreek.com