HTML5shiv does not work properly on IE8

StackOverflow https://stackoverflow.com/questions/20116338

  •  03-08-2022
  •  | 
  •  

Question

I try to use HTML5shiv (download from google) to format my menu to horizontal menu! The problem is when I call my website using localhost, the menu works perfect. But when I call my website using ip (example 192.168.1.1/menu.aspx), the menu does not format correctly. Apparently I need to be able to call website using ip instead of localhost, for obvious reason :)

First image is what i want. Second one is what it appears. Correct Menu Incorrect Menu.

  <%@ page Language="VB" CodeFile="test_menu.aspx.vb" Inherits="ddd" %>
     <!DOCTYPE html>
     <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
     <meta lang="th" charset="windows-874" />
      <!--[if lte IE 9]>
     <script src="/CSS/html5_2.js"></script>
     <![endif]-->
     <title></title>
    <style type="text/css">

        nav{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:30px;border-radius:5px; width:90%;margin-right: 0px;
        }
     nav ul{ margin:0px; padding:0px;} 
     nav ul li{list-style-type:none; display:inline-block;  margin:0 0 0 -3px}
     nav ul li a{ display:block; color:#FFFFFF;text-decoration:none; text-     transform:uppercase; padding:10px 25px;  background:#2429E8; border-right:solid 1px #fff;text-wrap:none;}
     nav ul li:hover>a{ background:#49A3FF}
     nav ul li:first-child a{border-radius:5px 0 0 5px;text-wrap:none;}
     nav ul li:last-child a{border-radius:0 5px 5px 0;}
/*...First-Level...*/
     nav ul li ul li:first-child a{border-top:solid 5px #fff;text-wrap:none;}
     nav ul li ul li:last-ch`enter code here`ild a{border-bottom:solid 5px #fff;text-wrap:none;}
     nav ul li ul{position:absolute; display:none; /*width:340px;*/ margin:0;text-wrap:none;white-space:nowrap}
nav ul li:hover ul{display:block;text-wrap:none;white-space:nowrap;}
nav ul li ul li{display:block; position:relative; border:none;text-wrap:none;}
nav ul li ul li a{ border-bottom:solid 1px #f4f4f4; border-right:5px solid #fff; border-left:5px solid #fff; border-radius:0px!important; background:#2429E8;  margin:0px; padding:5px; text-wrap:none;}

/*...Second-Level...*/
nav ul li:hover ul ul{display:none}
nav ul li ul li:hover>ul{display:block}
/*...Third-Level...*/
nav ul li ul li ul{display:none; background:#2429E8; position:absolute; top:-10%; left:145px; width:140px;}

        .auto-style1 {
            width: 90%;
            border: 1px solid #c0c0c0;
        }
    </style>

</head>
<body> 
    <form id="form1" runat="server">
        <table class="auto-style1">
           <tr>
                <td><nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="#">Treaty</a>
        <ul>
          <li><a href="#">Create New Treaty</a></li>
          <li><a href="#">Add Reinsurer to Treaty</a></li>
          <li><a href="#">Change Treaty</a></li>
          <li><a href="#">Change Reinsurer to Treaty</a></li>
        </ul></li>
      <li><a href="#">Faculatative</a></li>
      </ul>
  </nav>    
                </td>
                <td>

    </td>
            </tr>
        </table>
    <div>
        <br /><br />

    </div>
    </form>
</body>
</html>

I am using .net 4, IIS7 run on windows7 and IE8. The point is why using IP does not work while using "localhost" does

Was it helpful?

Solution

From the images, This seems to be a Browser specific Problem and NOT an HTML5shiv Problem.

Please check which Document Mode Your IE8 is running in. If it is IE8 then its some other error. If it's something else than IE8 please add this meta tag as the first element of the <head> Tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top