Web Hosting Talk







View Full Version : Problems with Image Wrapping


futureal
02-23-2005, 02:18 AM
I am trying to get an amount of text to wrap around an image, so I have broken the image up into sections to get it to wrap around. Each image belongs to the following class:

IMG.reviewtitle { float: right; clear: right; margin-left: 2px; }

Now, this *mostly* works, save for two major problems, each browser-specific.

In IE, parts of the text are getting overlapped by the image.

In Firefox, the *first* time I load the page, the text does not wrap at all, it just overlays the entire image. However, if I immediately refresh, it loads correctly.

Here's an example link:
http://www.rctech.net/reviews/revie...ne_futureal.php

I have read a few different tutorials and none really explain anything other than what I am already doing; I just can't figure out what could be causing the problems. Any and all help is very much appreciated!

digiscape
02-23-2005, 04:05 AM
Your url got truncated I gather this is the page (http://www.rctech.net/reviews/review_nimbletwolane_futureal.php)

It is working ok for me in firefox, once the entire page loads
I tried a couple of well know IE fixes but no luck

Regards
Jason

futureal
02-23-2005, 01:39 PM
Woops, I copied the URL in its already truncated form... my bad! You were correct, it's:
http://www.rctech.net/reviews/review_nimbletwolane_futureal.php

I have seen other people write tutorials on this that seem to work, I am left to wonder what I could be doing wrong.

When you load it in Firefox, after the images and everything load, the text wraps? On mine it stays overlaid.

digiscape
02-24-2005, 05:28 AM
Yeah your right firefox doesnt work on first load
Can you post some links to the tutorials you have looked at?

Jason

futureal
02-24-2005, 04:03 PM
I will see if I can dig them out and I'll post them in a bit. I had a chance yesterday to test the page in Safari and IE for Mac, and ironically enough the image wrapping worked fine in Safari, although in IE for Mac the entire page was hosed. I fixed parts of it but couldn't get the wrapping to work at all in that browser...uggh.

digiscape
02-24-2005, 04:19 PM
I think if you add image width and height dimensions firefox will play along.

I found this from eric meyer http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html

Which uses the same method as yourself, it mentions that IE5 on mac will not play along.

I also noticed in IE6 on PC when images are going from small to large the text will extend to the width of the previous image, causing the text to overlay the image.

You might want to try this method which has wider browser support
http://www.evolt.org/article/Super_Ragged_Floats/22/50410/

Jason