wonderful world of crossbrowser css

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

Guys over at Doctype will help you better, I guess.

Answer 2

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.

Answer 3

Check this you have

Internet</a></a>