float-left in image tags not working

[bonnie]

I just discovered that float-left doesn't work in an image tag for my WebHelp target. Instead of text wrapping to the right of the image, the image behaves as if it is inserted at the front of the first line of the text and the rest of the text that is supposed to wrap falls below the image.
float-right DOES work.
Both float-right and float-left work in the PDF target.

Has anyone else noticed this?
If so, has anyone figured out a work-around?
Thanks,
Bonnie

[KevinDAmery]

Have you tried looking at the output in multiple browsers? This sounds like a browser-compatibility issue to me. Some browsers interpret Float differently than others.

[NorthEast]

If you're setting the float on the img tag, is it not just that it's being applied inside its container tag?

What I would suggest is to apply the float property to the tag that contains the image - i.e. the paragraph (p) or div.

[i-tietz]

I'm irritated ... why float? The attribute align is the one designed for this.

If you assign align="left" the image moves to the left edge and the following text stands right of it until the image is passed - then the text wraps around the image and starts at the left edge.

The distance between text and image is controlled by margin-left or margin-right.

[KevinDAmery]

I'm irritated ... why float? The attribute align is the one designed for this.

If you assign align="left" the image moves to the left edge and the following text stands right of it until the image is passed - then the text wraps around the image and starts at the left edge.

The distance between text and image is controlled by margin-left or margin-right.

According to the W3C, "Align" is a deprecated attribute. Float is the preferred method going forward.

http://www.w3.org/TR/html4/present/graphics.html

[i-tietz]

w3.org also says:

Code: Select all

User agents should continue to support deprecated elements for reasons of backward compatibility.

[KevinDAmery]

True, but that doesn't make it best practice to design new content with deprecated attributes instead of the newer tags. In other words, if you have existing pages that use "Align" you can expect them to continue to work for the time being, but if you're making a new page it would be better to use "Float".

[bonnie]

If you're setting the float on the img tag, is it not just that it's being applied inside its container tag?

What I would suggest is to apply the float property to the tag that contains the image - i.e. the paragraph (p) or div.

Thanks, Dave. I thought through what you suggested, and read up on the float property in my HTML & XML O'Reilly book and I'm sure that the float attribute should be contained within the img tag in order to specify the image alignment relative to the container paragraph. The right-float attribute works as expected in the img tag. The left-float does not.

Have you tried looking at the output in multiple browsers? This sounds like a browser-compatibility issue to me. Some browsers interpret Float differently than others.

I'm seeing the same results in both IE and Firefox.

I'm going to report this as a bug, unless someone tells me otherwise.
Thanks,
Bonnie

[MarinaMichaels]

Is it possible you also need to clear floats from before?

[bonnie]

I have the float-left attribute in the image tag working now, after playing around with it for awhile. I'm still not sure what it was that I had wrong. I tried to reproduce the problem so I would know, but couldn't.

So this appears to be operator error on my part.

Thank you to those of you who tried to help me resolve this. Sorry to have taken up your time.
Bonnie