Question

I’m just beginning to learn about the differences between how css (and html) is rendered in internet explorer vs. firefox.
Firefox Displays………………………….IE Displays

my html code

<div id="navmenu">
    <ul id="menu">
   <li><a href="welcome.html" target="content">Home</a></li>
   <li><a href="http://www.google.com" target="content">Internet</a></a></li>
   <li>
     <div>
       <a href="">Forms</a></div>
       <ul class="hide">
         <li><a href="student_nurse/view_form.php" target="content">Student Nurse Request</a></li>
         <li><a href="supervisor_request/get_form.php" target="content">Supervisor IT Request</a></li>                      
       </ul>
   </li>
   <li>
     <div>
           <a href="">Help</a></div>
       <ul class="hide">
             <li><a href="/ticket" target="content">Support Admin</a></li>   
         <li><a href="/client" target="content">Submit/View Ticket</a></li>                 
       </ul> 
   </li>
   <li><a href="policies.html" target="content">Policies</a></li>  
 </ul>
   </div>

   <script type="text/javascript">
   $('#menu li:has(ul) > div').toggle(
        function() {
            $(this).next().css("margin-left","13px");
            $(this).next().show();
        },
        function() {
            $(this).next().hide();
        }
    );

    </script>

and finally my css for the html

body{
    background-color: #008080;
    }

/* Logo Positioning */
 img{ 
    margin-bottom:20px;
    }

 #navmenu{
    border: 0px;
    border-bottom-width: 0;
    width: 185px; 
    }

 /* navigation menu style */
 #navmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }

 /* base anchor effects */
 #navmenu li a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 169px; /*185px minus all left/right paddings and margins*/
    text-decoration: none;
    color: white;
    background-color: #008080;
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    }

 /* base anchor effects */
 * html #navmenu li a{ /*IE only */ 
    width: 169px; /*185px minus all left/right paddings and margins*/
    }

 /* hover effects for anchors */
 #navmenu li a:hover {
    background-color: #007070;
    border-left-color: #1c64d1; 
    }

 /* class to hide submenu's by default */
 .hide {
    display:none;
        }

 /* class for javascript clock */
 #clock { 
      margin-left:20px;
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 0.8em; 
      color: white; 
      background-color: #008080; 
      border: 2px solid #008080; 
      padding: 4px; 
      }

Forgive me if there are egregious errors in my css or html. I’m not a professional web programmer. I would just like a little bit of guidance as to what is making them render differently in the two browsers.

Answer 1

On this line in your HTML:

   <li><a href="http://www.google.com" target="content">Internet</a></a></li>

You have closed the anchor twice. Try removing one of the </a> tags.