Problem with Editor and CSS

  •  01-22-2007, 5:31 PM

    Problem with Editor and CSS

    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?
View Complete Thread