title: Horizontal Menu IE7 and IE8 compatibility Issue
body: <p>I created a horizontal menu which works perfectly in Firefox 6, IE9, Safari, Chrome and Opera but in IE7 &amp; IE8 the last link in the menu breaks to the next line, I'm attaching the screenshot of the menu.</p>
  
  <p>IE9 Screenshot of the Horizontal Menu
  <a href="http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/819/ie9screenshot.jpg/</a></p>
  
  <p>IE8 Screenshot of the Horizontal Menu</p>
  
  <p><a href="http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/" rel="nofollow">http://imageshack.us/photo/my-images/696/ie8screenshot.jpg/</a></p>
  
  <p>The HTML and CSS code are as follows:-</p>
  
  <p>HTML Code:-</p>
  
  <pre><code>&lt;ul class="menu"&gt;
  
          &lt;li class="first"&gt;&lt;a href="#"&gt;Bridal&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Bridesmaid&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Gentleman's&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Flower Girl&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Special Occassion&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Accessories&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;Shoes&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;img src="images/divider.jpg" alt="Divider" /&gt;&lt;/li&gt;
  
          &lt;li class="last"&gt;&lt;a href="#"&gt;Sale&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt; &lt;!-- END OF MENU --&gt;
  </code></pre>
  
  <p>CSS Code:-</p>
  
  <pre><code>ul.menu {
  width: 965px;
  height: 44px;
  font-size: 18px;
  color: #ffffff;
  list-style: none;
  margin: 0px;
  padding: 0px;
  }
  
  ul.menu li {
  float: left;
  background-repeat: no-repeat;
  margin: 0px;
  padding: 0px;
  }
  
  ul.menu li a {
  height: 34px;
  color: #ffffff;
  text-align: center;
  display: block;
  background-image: url(images/menu-normal.jpg);
  background-repeat: repeat-x;
  margin: 0px;
  padding: 10px 17px 0px 17px;
  }
  
  ul.menu li.first {
  background: none;
  }
  
  ul.menu li.first a {
  width: 88px;
  background-image: url(images/first-normal.png);
  margin: 0px;
  padding: 10px 0px 0px 8px;
  }
  
  ul.menu li a:hover {
  background-image: url(images/menu-hover.jpg);
  background-repeat: repeat-x;
  }
  
  ul.menu li.first a:hover {
  background-image: url(images/first-hover.png);
  }
  
  ul.menu li.last a {
  width: 68px;
  background-image: url(images/last-normal.png);
  margin: 0px;
  padding: 10px 8px 0px 0px;
  }
  
  ul.menu li.last a:hover {
  width: 68px;
  background-image: url(images/last-hover.png);
  }
  </code></pre>
  
  <p>I found some similar articles in this and other forums but none of them were helpful. I tried list-position: inside; display: inline; etc but none of them work. One more detail I'm viewing the html page in IE9 browser but checking them in IE7 and IE8 compatibility mode.</p>
  
  <p>Thanks,
  Raj</p>