Results 1 to 1 of 1
May 26, 2002, 12:15 #1
- Join Date
- Mar 2001
- Northwest Florida
- 0 Post(s)
- 0 Thread(s)
TIP: Stop images and text from overlapping in Netscape 4.x
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!
FOR THOSE INSERTING IMAGES INTO <DIV> LAYERS
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
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);