Javascript IE8 Problems

Javascript - IE8 Problems

It is my policy to try and support all browsers - even IE8. This is part of my general policy to never update software - because experience has shown, many times, that updates cause more problems than they pretend to solve!

However, there are some features that simply do not exist in the older software. For instance, IE8 does not support any of the HTML5 features.

This page documents two HTML4 features that would not work on my system. I eventually discovered the problem - every page on my site contains

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

I never understood why, it was just what I was told to do way back when I started producing web pages. Come to find out, that is the reason none of the stuff on this page worked. Changing that to

<!DOCTYPE>

fixed every problem described below. According to w3schools, IE8 uses HTML 4.01 and my tag was telling it not to use the new features.

Position

This section contains a simple div with a background color.

position:absolute; works
position:fixed; fails

simple div

To test this,

Press F12 to open the debug window - you might have to press it more than once
Select the CSS tab - the 2 styles associated with the box are #position_test and .position_test
Use the checkbox to disable position:fixed;
The box should move

Unfortunately, absolute means that the box will scroll with the page and toolboxes (windows) require fixed so they won't move when the page is scrolled.

w3schools is very clear - fixed should be supported in IE7 and above.

When the position is set to relative, then top:-7px; won't work. Basically, negative values are not allowed. Of course, w3schools says that, since IE5, they are.

Of course, I could write code using absolute and detect page scrolls to emulate what more recent browsers support natively - but why bother.

BTW, none of the w3schools pages will open in IE8 - it appears that they are detecting the browser and blocking the site.

I guess that is one way to force people to buy a new computer.

Hover

The CSS hover pseudo-class is only supported on anchor tags that have a valid href property. Most other browsers support hover on all tags.

div tag

div id=div_tag

Anchor tag - null href
a href id=anchor_tag

Anchor tag - with href & ID
a href=# id=anchor_tag_href

Anchor tag - with href, no ID
a href=#

#div_tag:hover{
  background-color:red
}

#anchor_tag:hover{
  background-color:red
}

#anchor_tag_href:hover{
  background-color:red
}

a:hover{
  background-color:green
}

Of course, w3schools says that, since IE5, hover tags are supported are. This is what clued me in to something being wrong with my pages. Because of this, I discovered that the DOCTYPE tag should be shortened or removed.

Remaining IE8 issues

Once position and hover were solved, new problems appeared.

Reading attributes

This solution was provided via xx.getAttribute("xyz")

Adding events

This solution was provided via mcSetEvent(UIElement, event_name, func_1)

'MouseEvent' is undefined

I could not find a way to create a MouseEvent

var xx = new MouseEvent()

Invalid argument - style.height = "inherit"

w3schools says it is supported - but it isn't

Author: Robert Clemenzi