title: How to adjust navigation design for different browsers?
body: <p>I am a noob when it comes to web design. I downloaded a template to create a site with but My navigation bar looks great in Chrome but is not positioned correctly in FireFox and a part of it is not positioned correctly in IE. Below is my code. I am not sure if this template was like this at the start or after I started adjusting it. I only used chrome for previews when I first started this.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;nav&gt;
              &lt;ul id="menu"&gt;
                  &lt;li class="alpha" id="menu_active"&gt;&lt;a href="index.html"&gt;&lt;span&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Whatisllf.html"&gt;&lt;span&gt;&lt;span&gt;What is LLF?&lt;/span&gt;&lt;/span&gt; &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="TeamManagement.html"&gt;&lt;span&gt;&lt;span&gt;Team Management&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="PlayerData.html"&gt;&lt;span&gt;&lt;span&gt;Player Data&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="PostSeason.html"&gt;&lt;span&gt;&lt;span&gt;Post Season&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Forums.html"&gt;&lt;span&gt;&lt;span&gt;Forums&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="omega"&gt;&lt;a href="PrivacyPolicy.html"&gt;&lt;span&gt;&lt;span&gt;Privacy Policy&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#menu {width:100%;overflow:hidden;margin-top:3px}
  #menu li {float: left;}
  #menu a {display:block;font-size:16px;font-weight:400;color:#000;background:url(../images/menu.gif) top repeat-x;line-height:55px;text-decoration:none}
  #menu li span {display:block;background:url(../images/menu_left.gif) top left no-repeat}
  #menu .alpha span {background:url(../images/left_menu.gif) top left no-repeat}
  #menu .alpha a:hover span,#menu .alpha#menu_active a span {background:url(../images/left_menu_active.gif) top left no-repeat}
  #menu .omega span span {background:url(../images/right_menu.gif) top right no-repeat}
  #menu .omega a:hover span span,#menu .omega#menu_active a span span {background:url(../images/right_menu_active.gif) top right no-repeat}
  #menu li span span,#menu .alpha span span {background:url(../images/menu_right.gif) top right no-repeat;padding:0 24px}
  #menu a:hover,#menu #menu_active a {color:#fff;background:url(../images/menu_active.gif) top repeat-x}
  #menu a:hover span,#menu #menu_active a span {background:url(../images/menu_left_active.gif) top left no-repeat}
  #menu a:hover span span,#menu #menu_active a span span,#menu .alpha#menu_active a span span,#menu .alpha a:hover span span {background:url(../images/menu_right_active.gif) tp right no-repeat}
  </code></pre>