[IE 7-10] Adding link to an image causes a blue border

[Molly]

Steps were discovered in our company's use of the editor and reproduced in the CKEditor demo before entering the bug. These bugs were tested in IE 7-10 (document standards mode), Chrome (latest), and Firefox (18.0.1, 19.0.1).

Basic way to reproduce:

1. Open CKEditor demo and insert an image. Do not give it a link at this time. Do not set the border.

2. Use Image Properties dialog on the image and give it a link.

3. The image will now display a blue border around it.

Alternative method of reproducing it:

1. Open CKEditor demo, clear demo, and go to Source.

2. Insert HTML for an image setting the border equal to 0.

Example: <img alt="light bulb" src="​http://www.lightbulbmarket.com/files/1974975/uploaded/Philips%20Incandescent%20A-19%20Light%20Bulb.gif" style="height:80px; width:60px; border:0px" /></a>​

3. Switch to the WYSIWYG. Use the Image Properties dialog to attach a link to the image. The blue border will appear around the image.

(If you switch to the Source view, the border tag has been removed.)

Another alternative method of reproducing it:

1. Open CKEditor demo, clear demo, and go to Source.

2. Insert HTML for an image setting the border equal to 0 and setting a link on the image.

Example: <p><a href="www.google.com"><img alt="light bulb" src="​http://www.lightbulbmarket.com/files/1974975/uploaded/Philips%20Incandescent%20A-19%20Light%20Bulb.gif" style="height:80px; width:60px; border:0px" /></a>​</p>

3. If you switch back to the WYSIWYG, you will see the blue border around the image.

(If you switch to the Source view, the border tag has been removed again.)

This issue may be related to Tickets: #8791 and #8792 (one seems to be a duplicate).

[Jakub Ś]

1. Could you perhaps send a screen cast of the problem?
2. Are you sure that this is happening on Demo page? I have tried every TC you have provided and no border occurred. For example:

• I have pasted below in source:

  <p><a href="http://google.com"><img alt="sss" src="http://www.lightbulbmarket.com/files/1974975/uploaded/Philips%20Incandescent%20A-19%20Light%20Bulb.gif" style="border:0px; height:59px; width:33px" /></a></p>
  

• switched to wysiwyg
• blue border was shown neither on demo nor on default installation of editor.

Either I have missed something or you have been testing this in your application which may have such CSS rule defined and not on demo page.

[Molly]

I'd be glad to do a screen cast. Do you have any recommendations on what software to use? We just use screen caps (Bonfire).

[Jakub Ś]

I use jing. I think it is only important to show TC steps in demo page and make sure file size is below allowed attachment maximum.