[Solved] IE8 have problem to work with my CSS code - CSS-Tricks

This topic is empty.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts

June 27, 2014 at 11:35 pm #173916

Participant

html:

<head>
  <title>
      VTPSim Pattern Validation Tool
  </title>
  <link rel="stylesheet" type="text/css" href="test1.css"/>
  <link rel="stylesheet" type="text/css" href="test2.css"/>
  <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

</head>
<body>
 <nav id="top-menu">
  <ul>
        <li> <a class="ex1" href="http://vtpsim.intel.com/index.htm">Home</a> </li>
        <li> <a class="ex2" href="http://vtpsim.intel.com/vtpsimmodule.htm">VTPSim Module</a> </li>
        <li> <a class="ex3" href="http://vtpsim.intel.com/trainingref.htm">Training & Reference</a> </li>
        <li> <a class="ex4" href="http://vtpsim.intel.com/toolrelease.htm">Tools Release Path</a> </li>
        <li> <a class="ex5" href="http://vtpsim.intel.com/Indicator/quality.htm">Software Quality Indicator</a> </li>
        <li> <a class="ex6" href="http://vtpsim.intel.com/Contact.htm">Contacts Us</a> </li>
  </ul>
 </nav>

CSS:

nav#top-menu {
    width: 100%;
    height: 65px;
    background-color: #531;
    margin: 0;
    padding: 0;
}

#top-menu ul {
    display: block;
    list-style-type: none;
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

#top-menu ul li {
    margin: 0;
    padding: 0;
}
#top-menu ul li a {
    display: block;
    float: left;
    max-height: 25px;
    width: 100px;
    margin: 0;
    padding: 5px 0;
    font-family: tahoma, sans-serif;
    font-size: 20px;
    text-align: center;
    background-color: #531;
    /*color: #da1;*/
    /*border-bottom: #531 solid 2px;*/
}
/*#top-menu ul li a:hover { border-bottom: #da1 solid 2px; }*/
#top-menu ul li a.ex1:hover 
{    
    text-decoration: underline;
    border-bottom: none solid 2px; 
}
#top-menu ul li a.ex2:hover 
{
    text-decoration: underline;
    border-bottom: none solid 2px; 
}
#top-menu ul li a.ex3:hover 
{
    text-decoration: underline;
    border-bottom: none solid 2px; 
}
#top-menu ul li a.ex4:hover 
{
    text-decoration: underline;
    border-bottom: none solid 2px; 
}
#top-menu ul li a.ex5:hover 
{
    text-decoration: underline;
    border-bottom: none solid 2px; 
}
#top-menu ul li a.ex6:hover 
{
    text-decoration: underline;
    border-bottom: none solid 2px; 
}

Wording in the menu”nav” doesnt look good in IE but look good in Chrome.WHat should I do with my CSS script.Thanks.

June 27, 2014 at 11:43 pm #173920