Re: Sizing and resizing bugs in the cuteeditor

  •  07-25-2007, 4:42 PM

    Re: Sizing and resizing bugs in the cuteeditor

    mikea,

    When you use

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    and height 100%, the parent node of the current element must have a value.
     
    Try the following HTML code:

    Case 1:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>TEST</title>
        </head>
        <body bgcolor="#979080" marginheight="0" marginwidth="0">
            <table height="100%" width="100%" bgcolor="white" border="0">
                <tbody>
                    <tr>
                        <td valign="middle">
                        <div align="center">Hello World; </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>


    Then remove <!DOCTYPE ...>,  it should work.

    Case 2:

    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>TEST</title>
        </head>
        <body bgcolor="#979080" marginheight="0" marginwidth="0">
            <table height="100%" width="100%" bgcolor="white" border="0">
                <tbody>
                    <tr>
                        <td valign="middle">
                        <div align="center">Hello World; </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>


    Solution:


    However without the DOCTYPE the browser will start attempting to emulate buggy behaviours of old browsers.

    To make this work in standards compliant mode you need to ensure you've set a height for all the ancestors of your element (in the case of this page that's the body and html elements). To do this you can add the following:

    <style type="text/css">
    html, body {
      height: 100%;
      margin: 0; padding: 0;
    }
    </style>


    Case 3:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>TEST</title>
           <style type="text/css">
                html, body {
                height: 100%;
                margin: 0; padding: 0;
            }
        </style>
        </head>
        <body bgcolor="#979080" marginheight="0" marginwidth="0">
            <table height="100%" width="100%" bgcolor="white" border="0">
                <tbody>
                    <tr>
                        <td valign="middle">
                        <div align="center">Hello World; </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>


    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

View Complete Thread