redirection to a specific location on click event not working with Internet Explorer but working on Mozilla and Chrome

Question

Below code is working fine with Mozilla and Chrome, but not with Internet explorer. Here, from first page (div 12), I am trying to go to a specific location on next page(div 8) by click event. I tried everything and searched on internet but not able to find a solution. Can anyone please help me out with this?

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<style>
table
{
border-collapse:collapse;
}
#table8{
    display: none;
}
th
{
    background-color:#bababa;
    color:white;
    font-family:"Arial";
}
button{
    font-size: 20px;
}
a:link    {color:blue;}
a:visited {color:purple;}
a:hover   {color:red;}
a:active  {color:red;}
a.bigsize:hover {font-size:90%;}
.some{
    width:50px;
    }
</style>

<script>
function show(nr){
    document.getElementById("table8").style.display="none";                <!-- Shows -->
    document.getElementById("table12").style.display="none";                <!-- Shows -->
    document.getElementById("table"+nr).style.display="block";
}
</script>
</style>



<div id="table12">
        <h2><section id="back223">Values</section></h2>
        <br><br>

        <table border=1 cellpadding=7>
            <tr><th>Table name</th>
            </tr>
            <tr bgcolor="#ffffe6"><td><a onclick='show(8);' href="#linkc1" name="linkc1">IPAddress</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc2" name="linkc2">IP_ROUTE1</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc3" name="linkc3">IP_ROUTE2</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc4" name="linkc4">IP_ROUTE3</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc5" name="linkc5">IP_ROUTE4</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc6" name="linkc6">IP_ROUTE5</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc7" name="linkc7">IP_ROUTE6</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc8" name="linkc8">IP_ROUTE7</a></td>
            </tr>
            <tr bgcolor="#ffffff"><td><a onclick='show(8);' href="#linkc9" name="linkc9">IP_ROUTE8</a></td>
            </tr>
        </table>
</div>


<div id="table8">
    <div  style="position:fixed;right:40px;top:20px;">
        <a name="t12" href="#t12" onclick='show(12);'><button style="height: 35px; width: 85px">  Back  </button></a>
    </div>

    <h2>Values</h2>

    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc1">IPAddress </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>Type</b></td>
            <td align="center"><b>Id</b></td>
        </tr>
        <tr bgcolor="#e6ffff">
            <td>Dns</td>
            <td>1</td>
        </tr>
    </table>
    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc2">IP_ROUTE1 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>0.0.0.0</td>
            <td>0</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc3">IP_ROUTE2 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>1.1.1.1</td>
            <td>1</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc4">IP_ROUTE3 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>2.2.2.2</td>
            <td>2</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc5">IP_ROUTE4 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>3.3.3.3</td>
            <td>3</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc6">IP_ROUTE5 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>4.4.4.4</td>
            <td>4</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc7">IP_ROUTE6 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>5.5.5.5</td>
            <td>5</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc8">IP_ROUTE7 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>6.6.6.6</td>
            <td>6</td>
        </tr>
    </table>

    <br><br><br><br>
    <table border=1 cellpadding=7>
        <tr bgcolor="#dddddd">
            <th colspan=2 align="left"><section id="linkc9">IP_ROUTE8 </section></th>
        </tr>
        <tr bgcolor="#f7f1ba">
            <td align="center"><b>IP</b></td>
            <td align="center"><b>Id</b></td>
        </tr>

        <tr bgcolor="#d4ffc6">
            <td>7.7.7.7</td>
            <td>7</td>
        </tr>
    </table>

</div>

</body>
</html>

EDIT: Added pics to show the issue clearly.

INPUT: This is the first page where you will click a link out of the list. So, I am clicking IP_ROUTE4 on this page.

EXPECTED BEHAVIOUR: This is what is supposed to be the expected behaviour. On first page, I clicked on IP_ROUTE4, so this table should appear on top so that user don't have to scroll and search for it. enter image description here

BEHAVIOUR IN IE: This is what is happening with IE. It is redirecting me to the top of the page instead of the table IP_ROUTE4.

you miss the "javascript:.." and which IE version are you talking about? — xmojmr, May 01 '14 at 10:49
@xmojmr, you only need the "javascript:" part if the script is inside the href. onclick doesn't need it. — davidethell, May 01 '14 at 10:50
Always good to have a jsFiddle demonstration - http://jsfiddle.net/L5w3e/. FYI you're missing your `` opening tag at the top of your file. — CodingIntrigue, May 01 '14 at 10:53
I'm unable to reproduce any problem. I used IE 8.0.6001.18702. You are probably experiencing the IE compatibility view mode problem, see e.g. http://stackoverflow.com/questions/3759731/internet-explorers-compatibility-view-breaks-my-site-design — xmojmr, May 01 '14 at 11:13
@Gauranga No, you have a doctype declaration, but no `` element. — CodingIntrigue, May 01 '14 at 11:21
@RGraham I added that in my document, but still the problem is there — Aakash Goyal, May 01 '14 at 11:25
@Guaranda your code works fine in IE 8.0.6001.18702 with compatibility mode turned off. What exactly is the "code not working" problem? Please describe it as to a tester (steps, expected behavior, point of failure) — xmojmr, May 01 '14 at 11:58

score 2 · Answer 1 · edited May 23 '17 at 10:32

I tried to make your example work in IE8 using mainly articles:

I'm giving this up as a useless way of spending time. I can only recommend you to support Modern Browsers.

Internet Explorer is known to be lot of pain for developers for ages. Due to lack of support for standards, proprietary extensions etc. It had improved lately, but not in IE8.

IE 8.0.6001.18702 on my machine in the HTML5test - How well does your browser support HTML5? shows only 43 out of 555 points. e.g. it does not support <section> element that you use as the anchor target..

If you really have to support IE8 then check the above links for some tips or use some library, like jQuery 1.x, that has all those hacks, workarounds and polyfills built in.

redirection to a specific location on click event not working with Internet Explorer but working on Mozilla and Chrome

1 Answers1