Support forums » Products » Cute Editor for .NET » Re: Big problem with images styled to 100% width when within table in IE8

Big problem with images styled to 100% width when within table in IE8

Last post 08-24-2012, 3:14 AM by Bloodcarver. 17 replies.
Sort Posts: Previous Next

  •  08-14-2012, 2:20 AM 74415

    Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    We have big problems when trying to insert large images styled to 100% width, it just wont work in Internet Explorer 8.
     
    When doing this in IE9, Chrome, Firefox everything works fine, but in IE8 it will just not work.
    We have tried this on your demo editors too, it does not work there eighter )c:
     
    When looking directly on the code in IE8 and not through the editor it works fine.
     
    Here is a sample so you can try this yourselfe.
     
    1. <img style="width: 100%" border="0" alt="" src="http://www.vikab.com/ie8imagewidth.jpg" />  
    2. <table border="1" width="100%">  
    3.     <tbody>  
    4.         <tr>  
    5.             <td><img style="width: 100%" border="0" alt="" src="http://www.vikab.com/ie8imagewidth.jpg" /> </td>  
    6.         </tr>  
    7.     </tbody>  
    8. </table>  
    9. <table border="1" width="100%">  
    10.     <tbody>  
    11.         <tr>  
    12.             <td>Same table with text </td>  
    13.         </tr>  
    14.     </tbody>  
    15. </table>  

    I really wish that you have a solution to this, it is really a big problem for us.

  •  08-14-2012, 4:28 AM 74416 in reply to 74415

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    If i set:
     
    1. Editor1.DOCTYPE = "<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">"  
     
    ... I get it to work but when i go in to HTML-view and then back the DOCTYPE fix is gone and the image becomes large again )c:

  •  08-14-2012, 4:43 AM 74417 in reply to 74416

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    After a bit of debgging i have dicovered that Your editor removes the DOCTYPE from Your iframe when switching to HTML-mode and it does not restore the DOCTYPE when switching back to NORMAL-mode.
     
    If you can fix this my problem will be solved.

  •  08-14-2012, 7:37 AM 74418 in reply to 74417

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Bloodcarver,
     
    Please set property EditCompleteDocument to true, then it will keep the doctype code.
     
      <CE:Editor ID="Editor1" runat="server" EditCompleteDocument="true">
            </CE:Editor>
     
    Regards,
     
    Ken 

  •  08-14-2012, 8:01 AM 74420 in reply to 74418

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Ken,
     
    I hoped this would be so simple, but no, it was not, when i switch to code mode and then back to normal the DOCTYPE has disappeared again.
     
    You can press F12 to see it happen in IE8.
     
    Any other suggestions?
     
    Regards,
    Håkan

  •  08-15-2012, 8:04 AM 74422 in reply to 74420

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Bloodcarver,
     
    Please try on demo page http://richtextbox.com/test/EditCompleteDocument.aspx. You can put you own doctype code in it for the test. Does it work for you?
     
    Regards,
     
    Ken 

  •  08-15-2012, 9:49 AM 74423 in reply to 74422

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Ken,
     
    I tried but with no success as when i pasted my code into the editor:
     
    and then clicked "Normal" your editor removes the DOCTYPE as you can see here (F12)
     
     
     
    The only time i get it to work is when i use the DOCTYPE property i my project.
     
    Then it looks perfect!!!
     
     
    The images are the same size as you can see.
    The doctype also is where it should be!
     
     
    But when i click the "HTLM" to view the HTML-code...
     
     
     and returns to "Normal" the bad things start to happen...
     
    The DOCTYPE has been deleted by the editor )c:
     
     
    I really hope you can give me something to fix this it is really a big problem for us.
     
    Best regards
    Håkan (Bloodcarver)

  •  08-16-2012, 8:19 AM 74436 in reply to 74423

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Bloodcarver,
     
    Please create the page with the code below and send me the page url. So I can test it directly. and please test it with your IE 8 browser too. Try click on the "save" button, does it get the content correct? Does it remove the doctype section?
     
    1. <%@ Page Language="C#" ValidateRequest="false" %>  
    2.   
    3. <%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <title>example</title>  
    8. </head>  
    9.   
    10. <script runat="server">  
    11.     protected override void OnLoad(EventArgs e)  
    12.     {  
    13.         editor1.DOCTYPE = @"<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"">";  
    14.         base.OnLoad(e);  
    15.     }  
    16.   
    17.     protected void btnSave_Click(object sender, EventArgs e)  
    18.     {  
    19.         TextBxo1.Text = editor1.Text;  
    20.     }  
    21. </script>  
    22.   
    23. <body>  
    24.     <form id="form1" runat="server">  
    25.         <CE:Editor ID="editor1" runat="server" EditCompleteDocument="true">  
    26.         </CE:Editor>  
    27.         <asp:Button ID="btnSave" runat="server" Text="save" OnClick="btnSave_Click" />  
    28.         <br />  
    29.         <asp:TextBox ID="TextBxo1" runat="server" TextMode="multiline" Rows="15" Width="800"></asp:TextBox>  
    30.     </form>  
    31. </body>  
    32. </html>  
    Regards,
     
    Ken 

  •  08-16-2012, 8:44 AM 74439 in reply to 74436

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi,
     
    I can do this but i think that there is some kind of misunderstanding here. What i want to do is NOT to edit the complete page, but only edit the content, and to get the images to work in the editor i have to set the editors DOCTYPE property.
     
    When the DOCTYPE property is set everything but the switching to the HTML-code-view works. So i dont think it will help anybody by setting up a new site.
     
    The only error is that your editor removes the doctype property when switching from  Normal-mode to HTML-mode and then back to Normal-mode.
     
    Normal - All is good
    We can see the DOCTYPE property in the code behind the editor
     
     
     
    HTML - all is still good (i think)
     
     
    Normal - The DOCTYPE is removed and the images in the tables is no longer 100% wide
     
     
     
     
    I think this is perfectly clear, and it has absolutely nothing to do with saving the document, it is all about appearance.
     
    Tell me if you still thinks i should set up a site for you?
     
    Best regards
    Håkan

  •  08-16-2012, 9:37 AM 74441 in reply to 74423

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Bloodcarver,
     
    The doctype code has been removed because the editor has not the  EditCompleteDocument="true" setting.
     
    You said you got the same problem with the online demo page I sent, so I need to confirm that you are testing the same setting as I said and with the same code.
     
    Regards,
     
    Ken 

  •  08-16-2012, 12:10 PM 74443 in reply to 74441

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi,
     
    I does not matter, if i set EditCompleteDocument="true" it removes it anyway. But... I dont want to use EditCompleteDocument="true" because i dont want to edit the complete html page. I just want to set the DOCTYPE of the IFRAME the editor edits, and this is what it does when i set the DOCTYPE property, but when switching to HTML and back it is removed.
     
    Is it mabye possible to detect the "switching back to Normal" by some javascript event and then reinstate the DOCTYPE property?
     
    Best regards
    Håkan Gustafsson

  •  08-17-2012, 8:56 AM 74446 in reply to 74443

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    Hi Bloodcarver,
     
    Yes, you can catch it in API CuteEditor_OnCommand.
    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>example</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CE:Editor ID="editor1" runat="server">  
    12.         </CE:Editor>  
    13.     </form>  
    14. </body>  
    15. </html>  
    16. <script>  
    17. function CuteEditor_OnCommand(editor,command,ui,value)  
    18.  {  
    19.     //handle the command by yourself  
    20.    if(command=="TabEdit")  
    21.    {  
    22.         //click on notmal view  
    23.    }  
    24.    if(command=="TabCode")  
    25.    {  
    26.        //click on html view  
    27.    }  
    28. }  
    29. </script>  
    Regards,
     
    Ken 

  •  08-20-2012, 12:58 AM 74454 in reply to 74446

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    This would be good. Just... How do i set the doctype on the editor?
     
    Something like this?
     
    1. var editor = document.getElementById('<%=Editor1.ClientID%>');   
    2. function CuteEditor_OnCommand(editor, command, ui, value) {   
    3.     if (command == "TabEdit") {   
    4.         editor.DOCTYPE = "MyDoctype";   
    5.     }   
    6. }  

  •  08-20-2012, 3:37 AM 74455 in reply to 74454

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote

    Hi Bloodcarver,

    I suggest you try the example below. It will keep the doctype setting and remove the html/head/body target. Then you can keep use the doctype and not allow the user edit the complete document.

    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>  
    4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head id="Head1" runat="server">  
    7.     <title>example</title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.         <CE:Editor ID="editor1" runat="server" EditCompleteDocument="true" DOCTYPE='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.gg.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'>  
    12.         </CE:Editor>  
    13.     </form>  
    14. </body>  
    15. </html>  
    16.   
    17. <script>  
    18. function CuteEditor_FilterHTML(editor,code)     
    19. {     
    20.     code=code.replace(/(<html[^\>]*\>)([\s\S]*)(\<\/html\>)/ig, "$2");     
    21.     code=code.replace(/(<head[^\>]*\>)([\s\S]*)(\<\/head\>)/ig, "$2");     
    22.     code=code.replace(/(<body[^\>]*\>)([\s\S]*)(\<\/body\>)/ig, "$2");     
    23.     return code;  
    24. }     
    25. function CuteEditor_FilterCode(editor,code)     
    26. {     
    27.     code=code.replace(/(<html[^\>]*\>)([\s\S]*)(\<\/html\>)/ig, "$2");     
    28.     code=code.replace(/(<head[^\>]*\>)([\s\S]*)(\<\/head\>)/ig, "$2");     
    29.     code=code.replace(/(<body[^\>]*\>)([\s\S]*)(\<\/body\>)/ig, "$2");     
    30.     return code;    
    31. }     
    32. </script>  
    Regards,

    Ken 

     

     

  •  08-20-2012, 4:42 AM 74458 in reply to 74455

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote

    I will try this at once!!

     

  •  08-20-2012, 5:05 AM 74459 in reply to 74458

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote
    I have tried, but the editor still removes the DOCTYPE when you switch between CODE and NORMAL. Any other ideas? Is there any way to reset the DOCTYPE when switching to NORMAL-view? This could fix your problem. By the way, the new editor here in the forum misbehaves after line breaks, the cursor jumps to the beginning of the new line, so i edit this in the CODE-view.

  •  08-21-2012, 9:01 AM 74465 in reply to 74459

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote

    Hi Bloodcarver,

     

    Are you testing my exmaple page? Or testing the same code on your own page? The page I sent works fine on my end.

     

    can you show me the test url of it? So we can check it directly. 

     

    Regards,

     

    Ken 

  •  08-24-2012, 3:14 AM 74475 in reply to 74465

    Re: Big problem with images styled to 100% width when within table in IE8

    Reply Quote

    I have tried your exact example and, yes, it works.

    It sets the doctype and when switching to code-view the doctype i at the beginning of the page. When i switch back it still is there and everything works fine. But when not editing the complete document your editor removes the doctype when switching back to the Normal-view. This has to be a bug.

     

    But when i set the contents of the editor programatically in my projets it does not matter if i edit the complete document or not, it removes the doctype as i switch back to the Normal-view.

     

    I have tried to set the doctype over and over again both in the code behind and the aspx-page, nothing seems to work. Can you please give me an example on this when you populate the editor in the code behind, preferably in VB.NET? 
View as RSS news feed in XML