Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#11220 closed Bug (wontfix)

Floated div causes empty gap in IE8-9

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

Description

If you add the following content to ckEditor in Internet Explorer 8 or 9 it produces a gap above the text. You can reproduce this on the full-featured demo editor.

You can add the same content to an empty HTML file and will render correctly.

<div style="float:right;background:#f5f5f5;width:200px;">a floatet div<br />
with multiple<br />
lines<br />
lorem<br />
ipsum<br />
dolor</div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

This issue does not exist for Internet Explorer 10.

Attachments (1)

ie-bug.zip (38.2 KB) - added by TheYves 5 years ago.

Download all attachments as: .zip

Change History (4)

Changed 5 years ago by TheYves

Attachment: ie-bug.zip added

comment:1 Changed 5 years ago by TheYves

You can find screenshots and a sample HTML file in the attachment.

comment:2 Changed 5 years ago by Jakub Ś

Resolution: wontfix
Status: newclosed

You can add the same content to an empty HTML file and will render correctly.

Not quite. Editor uses contenteditable attribute and this is great example that browser don't handle editable elements in same manner as editable.

If you try below code in plain HTML you will get same result.

<body contenteditable="true">

<div style="float:right;background:#f5f5f5;width:200px;">a floatet div<br />
with multiple<br />
lines<br />
lorem<br />
ipsum<br />
dolor</div>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</body>

Another way to test this is using readonly sample. Once editor is readonly the output is correct.

All I can say is that result will look as expected on target page or in preview but as for editor this is browser bug and there is nothing we can do here.

comment:3 Changed 5 years ago by TheYves

Thank you for clarification.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy