Opened 12 years ago

Closed 12 years ago

#8933 closed Bug (invalid)

Floated image is not floated, when added a link

Reported by: HerrSerker Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:


If you add a image in the text and have it a floated style, all is correct, the generated code is

<img src="" style="float:left; width: FOOpx; height: BARpx" />

If you add a link to the image, the <img> tag is wrapped with the <a> tag's code.

What is wrong? The 'float:left' style should now be on the link and not on the image.

Wrong: <a href=""><img src="" style="float:left; width: FOOpx; height: BARpx" /></a>

Right: <a style="float:left" href=""><img src="" style="width: FOOpx; height: BARpx" /></a>

I tried this on the nightly build demo page. It shows the wrong behavior there.

Change History (1)

comment:1 Changed 12 years ago by Jakub Ś

Resolution: invalid
Status: newclosed
Version: 3.6.4 (SVN - trunk)

You had me thinking there for a while :).


	Wrong: <a href=""><img src="" style="float:left; width: 100px; height: 100px" /></a></p>
	Right: <a href="" style="float:left"><img src="" style="width: 100px; height: 100px" /></a></p>

With the above examples - the visual representation is the same - hand cursor when hovering over image. The problem starts when user wants to take dimensions of link, containing a floated image, with JavaScript. The result will be 0x0 - this is because container element does not include floated elements when calculating its dimensions - This is how it is as you probably know.

This may be something not expected but we can't change this because:

  1. If DOM had changed E.g. user had removed image, there would be floated link left which could be something user didn't want. We just can't let the editor to be "to smart" because in final result is may cause some unexpected problems annoying users.
  2. My personal opinion if user knows how to get dimensions in JavaScript he should also be aware of this rule and should be able to change properties of images and links. This only requires making few clicks and adding/removing styles in element properties.
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy