I have a simple setup: an image and then a paragraph with a bit of info that is hidden and then slides up over the image on mouse hover. If I try to apply a border-top that is dashed or dotted onto the paragraph it simply turns into a solid line. Is this a known issue with a fix? I even tried adding the dotted border through jQuery and it still comes out as a solid line.

<div class="wrap">
    <img src="images/fillertxt.jpg" alt="image" />
    <img src="images/filler.jpg" class="front" alt="image" />
    <p class="info">
        This is a short description with a bit of text.
    </p>
</div>

.wrap .info {
    width:204px;
    height:50px;
    background:url(images/infobg.jpg) repeat-x #8d9c0c;
    color:#f7f5ef;
    padding:3px;
    position:absolute;
    top:142px;
    left:0;
    border-top:3px dotted #8d9c0c;
}



$(document).ready(function(){
$("p.info").css("border-top","3px dotted #8d9c0c");
$(function(){
   bindTypeOne();
   $("input[type=radio]").click(function(){
      if ($(this).attr("rel") == "type1"){
         bindTypeOne();
      } else if ($(this).attr("rel") == "type2"){
         bindTypeTwo();
      }
   });
});

function bindTypeOne() { 
 $("div.wrap").hover(function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"141px"}, 400);        
   },function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"0"}, 700);
 });
};

function bindTypeTwo() {
  $("div.wrap").hover(function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"80px","border-top":"3px dotted #8d9c0c"}, 400);        
  },function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"142px"}, 700);
  });
};

});