Support forums » Products » Cute Editor for .NET » Re: Problem with Editor and CSS

Problem with Editor and CSS

Last post 02-20-2007, 10:51 AM by yugota. 9 replies.
Sort Posts: Previous Next

  •  01-22-2007, 5:31 PM 26020

    Problem with Editor and CSS

    Reply Quote
    I have the following HTML:
     
    <div style="height: 100px; width: 100px; border: 3px solid black;">
    Content Goes Here
    </div>
     
    In both IE and Firefox, this renders a 100x100 box with a 3px border, effectively making the box 106x106.  However, in the Cute Editor (use in IE or FireFox as well), the border is getting included in the 100x100, effectively rendering the interior of the box 94x94.  This is a problem because I am trying to line up this box with an image that is 100px high with the same 3px border around it.  The image, however, generates in the Cute Editor correctly, and the effective height is 106 when including the borders. 
     
    In content that uses floats and other CSS like that for positioning, that 6 pixel difference can cause a huge problem, and get things to display completely differently, which leads the design of the page to not work once it is saved and displayed on the site.
     
    Is there any way to fix this?

  •  01-22-2007, 7:19 PM 26023 in reply to 26020

    Re: Problem with Editor and CSS

    Reply Quote
    yugota,
     
    >>In both IE and Firefox, this renders a 100x100 box with a 3px border, effectively making the box 106x106
     
    No, it's not correct. Cute Editor renders it same as IE, Firefox.
     
    Please check Box model for more information.
     
     
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  01-22-2007, 11:35 PM 26037 in reply to 26023

    Re: Problem with Editor and CSS

    Reply Quote
    I hate to tell you this, but I am looking at the exact same HTML in the Cute Editor and in IE directly, and they ARE NOT doing the same thing.
     
    Here's Cute Editor:
     
     
    Here's IE6.0:
     
    Here's FireFox 1.5:
     
    Quite clearly, the editor is not displaying the same as IE or FireFox.  Regardless of what the Box Model recommendation states and which of the three follows it more accurately, IE and FireFox do not do the same thing as the cute editor in this situation.
     
    Here's the pertinent HTML:
     
    <div id=InfoGalleryStyleByRoom><img style="BORDER-RIGHT: medium none; BORDER-TOP: #e8c25c 3px solid; FLOAT: left; BORDER-LEFT: #e8c25c 3px solid; BORDER-BOTTOM: #e8c25c 3px solid" src="http://cutesoft.net/Upload-Images/IGStyleByRoomSide.jpg">
    <div style="BORDER-RIGHT: #e8c25c 3px solid; BORDER-TOP: #e8c25c 3px solid; BACKGROUND: url(/Upload-Images/IGStyleByRoomNav.gif); FLOAT: left; MARGIN: 0px -3px 0px 0px; BORDER-LEFT: medium none; WIDTH: 252px; BORDER-BOTTOM: #e8c25c 3px solid; HEIGHT: 332px">
    <ul class=test>
        <li><a href="CONTENT_PAGE:0fb3d7bd-81b7-4ec8-b2f5-95f106b022c5"><img src="http://cutesoft.net/Upload-Images/IGStyleByRoomNavKitchen.gif"> </a></li>
        <li><a href="CONTENT_PAGE:93c5955e-29b5-407f-b88d-9792bd276cba"><img src="http://cutesoft.net/Upload-Images/IGStyleByRoomNavDining.gif"> </a></li>
        <li><a href="CONTENT_PAGE:789a9351-2377-4e60-a51f-92e291e1a246"><img src="http://cutesoft.net/Upload-Images/IGStyleByRoomNavFam.gif"> </a></li>
        <li><a href="CONTENT_PAGE:3eb90a05-f18d-4da0-9b5b-f5a158129bb3"><img src="http://cutesoft.net/Upload-Images/IGStyleByRoomNavBathroom.gif"> </a></li>
        <li><a href="CONTENT_PAGE:53fcd299-6e4e-4434-aacf-4c02c3ddd4c2"><img src="http://cutesoft.net/Upload-Images/IGStyleByRoomNavBedroom.gif"> </a></li>
    </ul>
    </div>
    </div>

  •  01-23-2007, 9:24 AM 26053 in reply to 26020

    Re: Problem with Editor and CSS

    Reply Quote
    yugota:
    I have the following HTML:
     
    <div style="height: 100px; width: 100px; border: 3px solid black;">
    Content Goes Here
    </div>
     
    In both IE and Firefox, this renders a 100x100 box with a 3px border, effectively making the box 106x106.  However, in the Cute Editor (use in IE or FireFox as well), the border is getting included in the 100x100, effectively rendering the interior of the box 94x94.  This is a problem because I am trying to line up this box with an image that is 100px high with the same 3px border around it.  The image, however, generates in the Cute Editor correctly, and the effective height is 106 when including the borders. 
     
    In content that uses floats and other CSS like that for positioning, that 6 pixel difference can cause a huge problem, and get things to display completely differently, which leads the design of the page to not work once it is saved and displayed on the site.
     
     
    No, it's not correct. Cute Editor renders it same as IE, Firefox.  Please check Box model for more information. 
     
     
    Have you measured it? I took screenshots in IE, firefox and Cute Editor, pasted into fireworks and compare them. Cute Editor doesn't do antthing special to render your box.
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  01-23-2007, 10:43 AM 26059 in reply to 26053

    Re: Problem with Editor and CSS

    Reply Quote
    Did you look at the three attached screens?  You can clearly see that it is not doing the same thing in Cute Editor as it is in the two browsers.  If I change the HTML to have a height of 338 px, the Cute Editor suddenly looks the way that the browsers display with a height of 332px, but then the div is too tall in the browsers.

  •  01-23-2007, 10:54 AM 26060 in reply to 26059

    Re: Problem with Editor and CSS

    Reply Quote
    yugota,

    No, it's not correct. Cute Editor renders it same as IE, Firefox.  Please check Box model for more information. 
     
     
    Have you measured it? I took screenshots in IE, firefox and Cute Editor, pasted into fireworks and compare them. Cute Editor doesn't do antthing special to render your box.
     
    Can you confirm you measured it and get the same result like mine?
     
    >>Did you look at the three attached screens?
     
    This can be caused by many reasons.  Let us confirm the above result then go further to discuss your particular issue in details.
     
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  01-23-2007, 2:11 PM 26062 in reply to 26060

    Re: Problem with Editor and CSS

    Reply Quote
    I took the screen shots of all three environments and here is what I got for heights (using Photoshop):
     
    Cute Editor:
       Div (including borders): 332px;
       Div (without borders): 326px;
     
    IE 6: 
       Div (including borders): 338px;
       Div (without borders): 332px;
     
    FireFox 1.5 
       Div (including borders): 338px;
       Div (without borders): 332px;
     
    Which is exactly what I described, and exactly what the three screen shots show.

  •  01-23-2007, 3:05 PM 26063 in reply to 26062

    Re: Problem with Editor and CSS

    Reply Quote
    It's impossible.
     
    The HTML code:
     
    <div style="height: 100px; width: 100px; border: 3px solid black;">
       Content Goes Here
    </div>
     
    You should get 100px.
     
     
     

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  01-23-2007, 3:09 PM 26064 in reply to 26063

    Re: Problem with Editor and CSS

    Reply Quote
    There are two issues. Let us resolve this first then work on your particular issue.
     
     
    No, it's not correct. Cute Editor renders it same as IE, Firefox.  Please check Box model for more information. 
     
     
    Have you measured it? I took screenshots in IE, firefox and Cute Editor, pasted into fireworks and compare them. Cute Editor doesn't do antthing special to render your box.
     
    Can you confirm you measured it and get the same result like mine?

    asp.net Chat http://cutesoft.net/ASP.NET+Chat/default.aspx
    Web Messenger: http://cutesoft.net/Web-Messenger/default.aspx
    asp.net wysiwyg editor: http://cutesoft.net/ASP.NET+WYSIWYG+Editor/default.aspx
    asp wysiwyg html editor: http://cutesoft.net/ASP
    asp.net Image Gallery: http://cutesoft.net/ASP.NET+Image+Gallery/default.aspx
    Live Support: http://cutesoft.net/live-support/default.aspx

  •  02-20-2007, 10:51 AM 26835 in reply to 26064

    Re: Problem with Editor and CSS

    Reply Quote
    I can confirm that when I measured it, I did not get the same results as what you are saying.  FireFox and IE show one thing, and the Cute Editor shows something different.
View as RSS news feed in XML