title: Problem with centered menu with float:left and Javascript in IE 7 and IE9
body: <p>I have made menu and centered it using css: <code>margin-left:auto; margin-right: auto;</code>. This menu is made of <code>&lt;a&gt;</code> links with <code>float:left</code> property. In Firefox and Chrome and even IE8 everything is ok - menu is in the center and in one horizontal line. But in IE9 there is problem - last element is 1px lower than rest of menu. It looks like that:<br/>
   <img src="https://i.stack.imgur.com/atOeF.jpg" alt="IE9 menu">. <br/>
  In IE7 there is also problem - last element is under the menu:<br/>
   <img src="https://i.stack.imgur.com/Qb1Sm.jpg" alt="IE7 menu">. </p>
  
  <p>I have tried adding <code>display:inline;</code> and it helped with float - in IE7 and IE9 menu was also looking like it should be. But menu centering was lost - menu was in one line but it was starting from the left in all borwsers that I checked. </p>
  
  <p>There is also Javascript that is adding fade effect to menu items. I think that problem lay within this Javascript.    </p>
  
  <p>Code of my menu looks like that:</p>
  
  
      
          
              
          
              
          
              
          
              
          
              
          
              
          
              
          
              
          
              
      
  
  
  <p>And css:</p>
  
  <pre><code>    .menu
      {
          background: url('Images/bg.jpg') repeat-x left top;
          height: 73px;
          margin-top: 8px;
      }
  
      .menu_inner
      {
          margin: 0 auto;
          width: 1001px;       
      }
  
      .menu_inner a
      {
          float: left;
          padding: 0px;
          margin: 0px;
      }
  </code></pre>
  
  <p>And Javascript wchich is adding fade effect:</p>
  
  <pre><code>(function ($) {
      $.fn.cross = function (options) {
          return this.each(function (i) {
              // cache the copy of jQuery(this) - the start image
              var $$ = $(this);
  
              // get the target from the backgroundImage + regexp
              var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');
  
              // nice long chain: wrap img element in span
              $$.wrap('&lt;span style="position: relative;"&gt;&lt;/span&gt;')
              // change selector to parent - i.e. newly created span
                      .parent()
              // prepend a new image inside the span
                      .prepend('&lt;img&gt;')
              // change the selector to the newly created image
                      .find(':first-child')
              // set the image to the target
                      .attr('src', target);
  
              // the CSS styling of the start image needs to be handled
              // differently for different browsers
              if ($.browser.msie || $.browser.mozilla) {
                  $$.css({
                      'position': 'absolute',
                      'left': 0,
                      'background': '',
                      'top': this.offsetTop
                  });
              } else if ($.browser.opera &amp;&amp; $.browser.version &lt; 9.5) {
                  // Browser sniffing is bad - however opera &lt; 9.5 has a render bug 
                  // so this is required to get around it we can't apply the 'top' : 0 
                  // separately because Mozilla strips the style set originally somehow...                    
                  $$.css({
                      'position': 'absolute',
                      'left': 0,
                      'background': '',
                      'top': "0"
                  });
              } else { // Safari
                  $$.css({
                      'position': 'absolute',
                      'left': 0,
                      'background': ''
                  });
              }
  
              // similar effect as single image technique, except using .animate 
              // which will handle the fading up from the right opacity for us
              $$.hover(function () {
                  $$.stop().animate({
                      opacity: 0
                  }, 550);
              }, function () {
                  $$.stop().animate({
                      opacity: 1
                  }, 550);
              });
          });
      };
  
  })(jQuery);
  
  // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
  // because .ready() fires before the images have loaded, but we need to fire *after* because
  // our code relies on the dimensions of the images already in place.
  $(window).bind('load', function () {
      $('img.fade').cross();
  });
  </code></pre>
  
  <p>Any help here much appreciated!</p>