Text overflowing onto floated image--only in certain browser

Hi. I did a quickie job recently that involved a simple 4-page static site. I validated it, tested in all browsers and set live for the client.

Now she is telling me when she loads this page the text overlaps the image to the right. I’m a little embarrassed at possibly mucking up such a simple site, but I’m not sure why the text would overflow the image. Is it because I didn’t set the width & height for the image?

Thanks in advance for any help.

Hi, can you give us more information? Browser? Platform?

I tested in IE6/7/8, FF2/3/3.5, Opera 10.10, Chrome 2, Safari 4, and Netscape 6 (that one is a joke)

None overlap (and I don’t see a reason why it would at this point)

Yes it’s likely that the page is loading before the image does.

Always add the height and width to all image elements to avoid this problem.

That image is 77k which is quite heavy for a small image anyway and obviously takes longer to load than the text that follows it. Firefox has always been bad at this.

Let us know if that solves the problem as I thought this was fixed in FF3.5 but I’m seeing the same problem there on first load or until refreshed which indicates that it is an image width and height attribute problem.

No idea. I tested in all the above as well and saw nothing. And I don’t know what the client is viewing on. I can say with some certainty that she likely has no idea what browser she uses. My thought was it would be easier to get a CSS guru to show me what I did wrong than to get that answer out of her.

Yeah, I thought that was probably the culprit. Thanks a lot.

I would let you know if it works, but I can’t re-create the issue on my end. I’ll only know if it works when I don’t get any more complaints. :slight_smile:

My internet is quite fast and as a result I probably didn’t even notice it overlapping (though to be fair, I wasn’t watching the page load in FF, I was loading it in other browsers as well)

Paul probably got the culprit because width/height attributes should always be set (not only to help IE, but FF in this case)

I too thought this was fixed in 3.5 because I saw a thread on Mozilla forums explaining this and how they solved it (or so I thought :confused:)

Paul can test it for you since he could originally see the issue :slight_smile:

Thank you. Width and height attributes have been added.

Now’s as good a time as any to thank you, Paul and all the others who help out nimrods like me on a regular basis. I don’t post on here a ton, but if there was a kudos button I’d be sending some out. Just thought you guys probably don’t hear “thank you” often enough and wanted to say that.

Thanks for the thanks - Ryan and I appreciate it.:slight_smile:

I checked your page in FF3.5 and FF2 and it seems fine now.