Hyperlink Manager and Image css float issue

[Paul]

Hi,

I am currently experiencing an issue in IE7 when attempting to add a hyperlink (through the hyperlink manager) to an image that is contained within a floated div.

As an example, I have performed the following test on the demo site (http://www.telerik.com/DEMOS/ASPNET/Prometheus/Editor/Examples/Default/DefaultCS.aspx).

1. Add a div around the current image using the HTML view of the editor:
<div style="float: left;"><img alt="product logo" src="../../Img/productLogoLight.gif" /></div>
2. Go back to the Design view
3. Click on the image and select the Hyperlink Manager
4. Add a link to the image

The following output is produced in IE:
<a href="http://www.telerik.com">http://www.telerik.com</a>
<div style="float: left"><img alt="product logo" src="../../Img/productLogoLight.gif" /></div>

However, in firefox, it produces the expected output of:
<div style="float: left;"> <a href="http://www.telerik.com"><img src="../../Img/productLogoLight.gif" alt="product logo" /></a></div>

Is there any way to get this to work in IE?

[Rumen]

Hello Paul,

We researched the problem further and we found that it is due to a browser bug in IE.
This is the IE way of getting the selected element - doc.selection.createRange().parentElement(); We tested this code and verified that IE does not return correct value!

<telerik:radeditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="GetSelectedElement" />
        </telerik:EditorToolGroup>
    </Tools>
    <Content>
    <div style="float: left;"><img alt="product logo" src="http://www.telerik.com/demos/aspnet/Prometheus/Editor/Img/productLogo.gif" /></div>
    </Content>
</telerik:radeditor>
<script type="text/javascript">
Telerik.Web.UI.Editor.CommandList["GetSelectedElement"] = function(commandName, editor, args)
{
  //var elem = editor.getSelectedElement();
  var doc = editor.get_document();
 
  //IE way of getting the selected element - IE does not return correct value! This is not related to editor, we are not able to find a workaround for this scenario.    
  var elem = doc.selection.createRange().parentElement();
 
  alert(elem.id + "\n" + elem.tagName);
};
</script>

Since this is a browser related problem, it is not related to editor and we are not able to find a workaround for this scenario. If the DIV is not floating the code will work properly. We invite you to experiment yourself using the TextRange Object. You can find more information here and here.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center