[Solved] Tag inspector problem and compatibility issue with browsers

[Saeid Kdaimati]

I'm using ASP.NET Ajax Q2 2011 and have a problem with changing css class for selected div.

I have two divs for photos and some text, by default both div has same css class, my client need to select the div that include the second photo and change its css class from "PhotoBoxRight" to "PhotoBoxLeft".

<div class="PhotoBoxRight" style="width: 300px;"><div><a href="PhotoDetail.aspx?ImageId=2007052318"><img src="images/2007/2007052318.jpg" border="0"></a></div><div class="PhotoBoxCredit">Text: <a href="photo">Text</a></div><div class="PhotoBoxCaption">Text</div></div>
More text here
<br><br>

<div class="PhotoBoxRight" style="width: 300px;"><div><a href="PhotoDetail.aspx?ImageId=2007052320"><img src="images/2007/2007052320.jpg" border="0"></a></div><div class="PhotoBoxCredit">Text: <a href="photo">Text</a></div><div class="PhotoBoxCaption">Text</div></div>

I configured the RAD Editor to read from an external CSS, and every thing is ok

<telerik:RadEditor ID="radBody" runat="server" Skin="Windows7" Width="750px" Height="690px"
                                StripFormattingOptions="AllExceptNewLines" NewLineBr="False" ToolsFile="~/SharedResources/Rad/Editor/ToolsFileReport.xml"
                                ContentAreaCssFile="./RTL/EditorContentArea_RTL.css" ContentFilters="None">
                                <CssFiles>
                                    <telerik:EditorCssFile Value="~/SharedResources/Rad/Editor/Report.css" />
                                </CssFiles>
                            </telerik:RadEditor>

When I test the page I got different behavior as following:
On FireFox 6.0.1: when I select the container div of the second photo, the "Apply CSS Class" menu reflect the current class of the div, when I change the class, it change it for the first div.

On Safari 5.1 and Chrome 13: the Apply CSS Class does not show css class of the selected div, when I select "PhotoBoxLeft" it apply it to the img tag.

<div class="PhotoBoxRight" style="width: 300px;"><div><a href="PhotoDetail.aspx?ImageId=2007052320"><img src="images/2007/2007052320.jpg" border="0" class="photoboxleft"></a></div><div class="PhotoBoxCredit">Text: <a href="photo">Text</a></div><div class="PhotoBoxCaption">Text</div></div>

On IE9: it adds font tag with PhotoBoxLeft class

<div style="width: 300px;" class="PhotoBoxRight"><div><a href="PhotoDetail.aspx?ImageId=2007052319"><font class="photoboxleft"><img border="0" src="images/2007/2007052319.jpg"></font></a></div><div class="PhotoBoxCredit"><font class="photoboxleft">Text: </font><a href="photo"><font class="photoboxleft">text</font></a></div><div class="PhotoBoxCaption"><font class="photoboxleft">Text</font></div></div>

I test the code on IIS7 on windows 7 and IIS6 on windows 2003.

Could you help please.

[Rumen]

Hi Saeid,

Thank you for reporting this compatibility issue.

I logged it for research and fixing in our bug tracking system. Here you can find the PITS Issue: Public URL.

As a small note of gratitude for your help on improving RadEditor, I updated your Telerik points.

Best regards,
Rumen
the Telerik team