Hi I'm trying to create Speech Bubbles with pseudo classes and i do, but strange problem appears on firefox only. There is some weird grey border on the border itself. I speak about the triangle that I want to attach to the bubble. In my case i place one pseudo class on the top of another to create the wished effect. here is my code:

.comment{
  float:right;
  border-width:1px;
  border-style:solid;
  color:#222222;
  font-size:12px;
  border-radius:5px;
  width:184px;
  padding:5px;
  height:20px;
        background: #f6f6f7;
  position:relative;
}
.comment:before{
    border-image: none;
    border-style: solid;
    border-width: 7px;
    content:" ";
    height: 0;
    left: -14px;
    position: absolute;
    top: 6px;
    width: 0;
    background:none;
    border-color: transparent #4396ca transparent transparent;
}

 .comment:after{
   border-color: transparent #F6F6F7 transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 6px;
    content: " ";
    height: 0;
    left: -12px;
    position: absolute;
    top: 7px;
    width: 0;
    background:none;
} 

If someone solved this problem on firefox will be glad to know how. Thank you.