monde merveilleux de crossbrowser css

Question

Je commence juste à apprendre les différences entre le rendu de css (et html) dans Internet Explorer et Firefox.
Firefox affiche ............................... IE Affiche

firefox http://i46.tinypic.com/a5e0rl.pngie http://i50.tinypic.com/6dv8t0.png

mon code html

<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> 

et enfin mon html pour le css

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; 
     } 

Pardonne-moi s'il y a des erreurs flagrantes dans mon css ou html. Je ne suis pas un programmeur web professionnel. Je voudrais juste un peu de conseils sur ce qui les rend rendre différemment dans les deux navigateurs.

Answer 1

Sur cette ligne dans votre code HTML:

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

Vous avez fermé l'ancre deux fois. Essayez de supprimer l'un des tags </a>.

Answer 2

Les gars de Doctype vont vous aider, je suppose.

Answer 3

Vérifiez ce que vous avez

Internet</a></a>