BUG: Opacity 50% on hover, Text edge becomes Fuzzy in FF?

BUG: Opacity 50% on hover, Text edge becomes Fuzzy in FF?

Hello,
So with the help of a member here I just finished making a demo page of what I've been working on.

What I wanted to do is have a set of 6 DIV's at 100% opacity, then when you hover over one of the DIV's the other 5 fade to 50% opacity.

Anyways, It works in all browsers but I'm having a weird visual issue with FireFox.

Here is my Demo Page:
http://www.joblesspunkdesigns.com/comp/header/header.html

here is the jQuery:
  1.     $(function() {        
            $("div#header .navbar").hover(function () {
                var mouseloc = $(this).attr("id");       
                $("div#header .navbar:not(#"+mouseloc+")").stop().animate({opacity: 0.5}, "normal");   
        },  
        
        function () {      
            $("div#header .navbar").stop().animate({opacity: 1.0}, "normal");       
            });   
        });









here is the CSS:
  1. body {
        margin: 0 auto;
        padding: 0;
        width: auto;
        height: auto;
        text-align: center;
    }

    #container {
        width: 900px;
        height: auto;
        margin: 0 auto;
        background-color: #0FC;
    }

    #header {
        width: 840px;
        _width: 855px;
        height: 150px;
        margin: 0 auto;
        background-color: #0F0;
        text-align: center;
    }

    .navbar {
        width: 100px;
        height: 140px;
        float: left;
        margin-left: 15px;
        margin-right: 15px;
        background-color: #00F;
        border-style: solid;
        border-width: 5px;
        border-color: #F00;
        font-family: 'FuturaLTBookRegular', sans-serif;
        font-size: 24px;
        color: #FFF;
    }

    @font-face {
        font-family: 'FuturaLTBookRegular';
        src: url('fonts/Futura_LT_Book.eot');
        src: local('Futura LT Book Regular'), local('FuturaLT-Book'),
            url('fonts/Futura_LT_Book.woff') format('woff'),
            url('fonts/Futura_LT_Book.ttf') format('truetype'),
            url('fonts/Futura_LT_Book.svg#FuturaLT-Book') format('svg');
    }

    @font-face {
        font-family: 'FuturaLTLightRegular';
        src: url('fonts/Futura_LT_Light.eot');
        src: local('Futura LT Light Regular'), local('fonts/FuturaLT-Light'),
            url('fonts/Futura_LT_Light.woff') format('woff'),
            url('fonts/Futura_LT_Light.ttf') format('truetype'),
            url('fonts/Futura_LT_Light.svg#FuturaLT-Light') format('svg');
    }























































Here is the HTML:
  1. <body>

    <div id="container">
    <div id="header" class="header">
    <div class="navbar" id="home">Home</div>
    <div class="navbar" id="about">About</div>
    <div class="navbar" id="web">Web</div>
    <div class="navbar" id="print">Print</div>
    <div class="navbar" id="blog">Blog</div>
    <div class="navbar" id="contact">Contact</div>
    </div>
    </div>

    </body>













View the Demo in Firefox then in any other browser (including IE6)

In Firefox when you hover over a DIV the text edge of the DIV's that fade to 50% opacity become "fuzzy". in ALL other browsers this does NOT happen.

How would one fix this?



 Is this a Bug?
Thanks for your help.