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.
