Teaching IE good behavior

HTML and CSS XSLT JavaScript Images Soft Etc

Internet Explorer is required to view this example.

	Task:	Have clear-cut patterns of CSS and HTML scripting for MSIE 5 and higher.

This script is not final and is to be modified and improved.

How it looks in the browser

<html>
    <head>
        <title></title>
        <style type="text/css">
            /*
                Do not forget that expression
                behavior: url(...)
                requires absolute path
            */
            body
            {
                background: white;
                color: black;
                behavior: url('../../etc/reformator/i/vlalek.htc');
            }
            .png
            {
                //background-image: none ! important;
                behavior: url('../../etc/reformator/i/vlalek.htc');
            }

            h1:hover, a:hover { color: red ! important; }
            h1:hover code { color: blue; }
            h1 code:hover { color: green; }
            p b:first-child,
            p b.first-child /* for IE */
            { color: green; }
            p:after,
            p.after
            { content: '.'; }
            p#paragraph:before,
            p#paragraph.before
            {
                content: '\2014\a0'; /* this format doesn't work in IE 5.x */
                //content: '&mdash;&nbsp;'; /* and this one in FireFox */
            }

            /* be careful using such expressions,
            as this may in some cases cause Windows to freeze really badly */
            b:first-child+b+b { color: red; } /* it's better not to put spaces around + due to IE 5.0 */
            /* replace + with 'plus' for IE, do not use comma */
            b.first-child plus b plus b { color: red; }

            form { float: left; padding: 0.25em; }
            form + p { clear: left; }
            form plus p { clear: left; }

            p:hover+form { background: yellow; }
            p:hover plus form { background: yellow; }

            input { border-width: 2px; }
            input:active,
            input:focus,
            input.focus
            { border-color: green; border-style: solid; }
            input:active { border-color: red; }
        </style>
    
    <body>
        <h1>Heading in&nbsp;pseudo-class <code>:hover</code></h1>
        <p>#" onclick="return false;">Link pseudo-class</a>
            stays the&nbsp;same. Pseudo-class <code>:after</code> 
            applies to&nbsp;paragraphs and&nbsp;puts full stops at&nbsp;the&nbsp;end.</p>
        <p id="paragraph"><b>First bold item</b>,
            <b>next item</b>, and&nbsp;<b>the&nbsp;third item</b> is red.
            And&nbsp;this&nbsp;paragraph is in&nbsp;pseudo-class
            <code>:before</code> that adds a&nbsp;dash before text</p>
        <p>And&nbsp;this button is in&nbsp;pseudo-classes <code>:focus</code>
            and&nbsp;<code>:active</code>.  If you hover the&nbsp;cursor
            over&nbsp;this paragraph, you&#146;ll see the&nbsp;form highlighted</p>
        <form onsubmit="return false;">
            <input
                type="button"
                value="Create new first item in the next paragraph"
                onclick="Insert_first_child()"
            />
        </form>
        <p>Image in&nbsp;pseudo-class ../png_in_ie/" target="_top">png</a></p>
        <img
            src="../png_in_ie/logo.gif"
            style="background-image: url('../png_in_ie/logo.png');"
            class="png"
            width="175"
            height="135"
            alt="Knorr &reg;"
        />
        <script type="text/javascript">
            var eP = document.getElementById( 'paragraph' );
            function Insert_first_child(){
                var eB = document.createElement('b');
                eB.innerHTML = 'New, ';
                eP.insertBefore( eB, eP.firstChild );
                eP.className += ' '; /* для Firefox */
            }
        </script>
    </body>
</html>

Order a design...

Teaching IE good behavior 22 November 2005

How it looks in the browser