Custom Tags Not Working in IE8

custom tags not working in ie8

To please the senior browsers ( IE8 and older) I would just go with something like:

HTML:

<span class="RB">text here becomes red and bold</span> and goes to default here

CSS:

.RB {color:Red; font-weight:bold; }

This targets all the RB classes. So you only need to wrap everything inside

<span class="RB"> </span>

IE8 lose custom tags

Try:

var mytag = document.createElement("myTag");
var testctrl = document.createElement("div");
mytag.innerHTML = "hai";
testctrl.appendChild(mytag);
document.body.appendChild(testctrl);

Conditional formatting tags not working in IE8

The space between <!-- [if.. should be removed. Hope it helps!

<!--[if gte IE 7]>
    <p>Show this in IE</p>
    <link href="../css/profileIE8.css" rel="stylesheet" type="text/css" />
    <![endif]-->

More info can be found here: http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx

Determine which custom HTML tag is offending IE8

Run this JS once the document is loaded. It will will find all elements with a tag name that starts with a / character, which is created in IE8 for all unrecognised elements when the parser encounters the close tag.

var list = document.getElementsByTagName('*');
for (var i = 0, len = list.length; i < len ; i++) {
  if (list[i].tagName.indexOf('/') === 0)
    alert(list[i].tagName.substr(1));
} 

Reading custom HTML elements using JavaScript is not working in IE

While I played computer games at last evening I came up with idea that could solve you problem. When I tried it out by my self I've got the theory that non valid html tags won't be created as an html object so you can't access those with functions from the DOM. So I changed the custom tags -inclusive the dd tag though it is a valid html tag- into div tags and added a dummy css class as an identifier.
The next change I made was to add the function getElementsByClass() method. Because document.getElementsByClassName() does not exists for IE8 and older, I rembered that I had found a function that does the same -note the differents in calling the function- there.
The result of these changes is following:

   <script type="text/javascript">
    function test() 
    {
        var devs = getElementsByClass('dev');
        for(var i = 0, len = devs.length; i < len; i++)
        {
            var h2 = getElementsByClass('rr', devs[i]);
            var h3 = getElementsByClass('dd', devs[i]);
            if(h2.length === 1)
            {
                aaa=h2[0].getElementsByTagName('a');
                if(h2.length === 1 && h3.length === 1)
                {
                    aaa[0].innerHTML = h3[0].innerHTML;
                    h3[0].innerHTML = "";
                }
            }
        }
    }

    function getElementsByClass( searchClass, domNode, tagName) { 
        if (domNode == null) domNode = document;
        if (tagName == null) tagName = '*';
        var el = new Array();
        var tags = domNode.getElementsByTagName(tagName);
        var tcl = " "+searchClass+" ";
        for(i=0,j=0; i<tags.length; i++) { 
            var test = " " + tags[i].className + " ";
            if (test.indexOf(tcl) != -1) 
                el[j++] = tags[i];
        } 
        return el;
    }
    </script>

And it seems that does work...

Custom cursor not working in IE8

I figured it out. My mistake was that in order to create my .cur file from a .png file, I just changed the extension in the Windows Explorer. Then, specifying this:

cursor: url('../Images/zoom.cur'), default;

Would work for modern browsers, but not for IE. The reason why that didn't work is that it compressed the file and not all browsers can read the compressed ones. So I used an online tool to convert my file correctly.

Be aware, I suggest that your .png file should be of size 32x32 before converting it, because IE9 (and IE8 for me too) seems to resize cursors that are smaller than this to 32x32.

Now, if you keep the above CSS line, it is going to work for IE, but not for modern browsers. For some reason I don't understand, the new uncompressed .cur file does not work anymore for modern browsers like Chrome. So, I decided to use the original .png file for the modern browsers. My final CSS line is:

.popover 
{
    cursor: url('../Images/zoom.png'), /* Modern browsers            */
            url('../Images/zoom.cur'), /* Internet Explorer          */
            default;                   /* Older browsers and Firefox */
}

For people who are confused on why the default value is necessary for Firefox, the article that helped me solve my problem said it pretty well:

You must add a default “built-in” cursor after your custom cursor, or the custom cursor will not load in Firefox. Think of it as Mozilla’s way of enforcing good web practices.

---

Related Topics