Having an issue with Jquerry CSS

Having an issue with Jquerry CSS

I have a project in which I have an image that has a lot of locations. I had to use an image map in order to show a specific tooltip for each location. I have successfully added the tooltip and for the most part stylized it the way I like. The issue is that there is a border around the BG image of the tooltip. border:'none', works great in Chrome and Firefox but does not work in IE...I can't seem to get rid of this border...please help. Below is my code. (I highlighted the most important part in yellow)
  1. <link rel="stylesheet" type="text/css" href="Framework.css" />
    <link rel="stylesheet" type="text/css" href="GenHTMLRules.css" />


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tools.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript" src="jquery.qtip-1.0.0-rc3.js"></script>


    <script type="text/javascript">
    $(document).ready(function() {
    /* hide the other slides---calling them "gallery"*/
        $("#ImageMap").hide();
        $("#gallery").hide();
    /*Fade in the begining presentation*/
        $(".logo").hide();
        $(".sub1").hide();
        $(".sub2").hide();
        $(".logo").fadeIn(1500, function(){
        $(".sub1").fadeIn(1500);
        $(".sub2").fadeIn(1500);
        });
        setTimeout(function(){ $("#OpenAnimation").fadeOut(1000) }, 3500);
        setTimeout(function(){$("#ImageMap").fadeIn(3000)},3500);
        $('area').each(function()
       {
          $(this).qtip({
            content: $(this).attr('alt'),
            position: {
                corner: {
                   tooltip: 'bottomMiddle', // ...and position it center of the screen
                   target: 'topMiddle' // ...and position it center of the screen
                }
             },
             style: {
                   height:67,
                   width:209,
                   padding:25,
                   color:'#fff',
                   background:'url(Images/black_arrow.png)',
                   }                 
          });
       });

    });
    </script>
    </head>

    <body>
    <div id="CRImain">
        <div class="header"></div>
          <div class="dashboard">
    <div id="OpenAnimation">
            <ul>
                <li class="logo"><img src="Images/LargeCatLogo.png" /></li>
                <li class="sub1"><img src="Images/subOne.png" /></li>
                <li class="sub2"><img src="Images/subTwo.png" /></li>
               </ul>
      
        </div>
            <div id="ImageMap"><img src="Images/map.png" border="0" usemap="#map" />
              <map name="map">
                <area shape="rect" coords="61,112,177,152" href="#" alt="1" />
                <area shape="rect" coords="157,196,275,234" href="#" alt="2" />
                <area shape="rect" coords="234,271,351,303" href="#" alt="3" />
                <area shape="rect" coords="348,52,450,90" href="#" alt="4" />
                <area shape="rect" coords="437,245,551,282" href="#" alt="5" />
                <area shape="rect" coords="510,155,580,187" href="#" alt="6" />
                <area shape="rect" coords="615,122,716,159" href="#" alt="7" />
                <area shape="rect" coords="767,203,837,248" href="#" alt="8" />
                <area shape="rect" coords="694,349,797,393" href="#" alt="9" />
              </map>
            </div>
        </div>
       
    </div>
    </body>
    </html> 













































































That is really it. Here is the linked CSS just in case you need it:
  1. @charset "utf-8";
    /* CSS Document */

    .header {
        background-image: url(Images/Header.gif);
        margin-right: auto;
        margin-left: auto;
        background-repeat: no-repeat;
        background-position: center center;
        height: 128px;
        width: 958px;
    }
    .dashboard {
        background-image: url(Images/dashboard.png);
        background-repeat: no-repeat;
        background-position: center top;
        height: 565px;
        width: 958px;
        margin-right: auto;
        margin-left: auto;
        margin-top:5px;
    }
    #OpenAnimation{
        margin-top:100px;
        position:fixed;
        padding-left: 185px;
    }

    #map {
        margin-left:auto;
        margin-right:auto;
        position:absolute;
       
    }
































I AM LOST, so please help! Also, I am going to try and add an image to each tooltip on top of the background. Have not really looked into that just yet, so if you have some ideas let me know.

THANKS!!!