Grow your CSS skills. Land your dream job.

Speech Bubbles with pseudo classes create anoing grey border on Firefox

  • # January 8, 2013 at 6:57 am

    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.

    # January 8, 2013 at 8:49 am

    Would you mind putting it in [CodePen.io](http://codepen.io “”)?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".