Question

I have created a menu with some Jquery effects and it is working well across all browsers except Firefox (my last menu item is not centered) and i have no idea why is this happening…
It looks like this in Firefox:http://robertpeic.com/future%20net/problem/problem.png                          In other browsers it renders fine:http://robertpeic.com/future%20net/problem/other.png

To solve this I did tried : added fixed width and height to my last anchor tag (fail), tried to add margin instead of padding (fail), tried to use Firefox hack via CSS it worked but breakes my CSS validation(fail),tried to increase padding a little bit and it looked OK in Firefox but breaked in every other browser(fail).

My last resort is to use browser sniffing but I really don’t want to use this for such a small issue.
Can someone help me to solve this problem?

FIDDLE EXAMPLE HERE

CSS code :

.menu{
position:relative;
display:block;
margin:0px auto;
height:37px;
background:url(http://robertpeic.com/future%20net/template%20images/menu-bg.png);
width:959px;

}


.menu ul{
list-style-type:none;
display:block;
width:990px;
margin:0 auto;
}

.menu ul li a{
float:left;
color:#4e4e4e;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:37px;
text-align:left;
margin-left:2px;
}

.menu ul li a:hover{
float:left;
color:#780C71;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
display:table-cell;
position:relative;
height:37px;
text-decoration:none;
background:url(http://robertpeic.com/future%20net/template%20images/main-menu-divider.png) 100% 0%;
background-repeat:no-repeat;
z-index:100;
padding:0px 18px 0px 18px;
line-height:38px;
text-align:center;
margin-left:2px;
}

.mainhover{
background-color:#BFC0C1;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}

.remove{
background-color:#C4C3C2;
z-index:50;
position:absolute;
border-radius:5px;
moz-border-radius:5px;
border-top: 1px solid #A09F9F;
border-left: 1px solid #B5B3B3;
border-right: 1px solid #EFEFEF;
border-bottom: 1px solid #EDEDED;
}

.menu ul li a.contact{
background-image:none;
padding:0px 30px 0px 23px;
text-align:center;
margin-left:6px;
}

Jquery code:

      $(document).ready(function(){
      var manageWidth = 14;
      var manageHeight = 10;
      var manageMargin = 6;

  $('.menu ul li a').hover(function(){

  var getHeight = $(this).outerHeight(true);
  var getWidth = $(this).outerWidth(true);
  $('<span class="mainhover" />').insertAfter($(this));
  $('.menu ul li .mainhover').css({'width':getWidth-manageWidth,'height':getHeight-manageHeight,'margin-top':'4px','margin-left':-getWidth+manageMargin ,'opacity':'0'});
  $('.menu ul li .mainhover').stop().animate({opacity:1},700);
  //alert(getWidth);
  },function(){
  $('.menu ul li a').next().removeClass('mainhover').addClass('remove').stop().animate({opacity:0},700,function(){
  $(this).remove();
});

});

    });

Answer 1

I suggest you to don’t use span, use div element to fix it.
Or you can try to add ‘text-align:center;’ to parent and ‘text-align:left’ to child.
Good luck