CODEWITHSUNDEEP
cssfirefox
Alexander Rechsteiner
Alexander Rechsteiner

Reputation: 5764

Pure CSS speech bubble with triangles: Firefox renders ugly 1px border for no reason?

I'm trying to do a simple speech bubble using the border triangle technique, by overlaying two triangles, one with the border color I want and the other one with the background color of the speech bubble, using :before and :after pseudo classes:

Here's a JSFIDDLE

.bubble:before, .bubble:after {
    border-style: solid;    
    content:"";
    display: block;
    position: absolute;
    width: 0;
}
.bubble:before {
    border-color: #DCDCDC transparent;
    border-width: 33px 0 0 33px;
    bottom: -33px;
    left: 40px;
}
.bubble:after {
    border-color: #FFFFFF transparent;
    border-width: 35px 0 0 35px;
    bottom: -30px;
    left: 37px;
}

The problem is the .bubble:after triangle. For some reason Firefox on Windows 8 renders an additional border that I have not defined, which looks really bad.

enter image description here

It works jolly well on Chrome and even Internet Explorer 10, 9 and 8 displays this perfectly.

Any ideas?

Upvotes: 2

Views: 1113

Answers (2)

Timber
Timber

Reputation: 877

You need to add 

border-style: outset;

Update To make it more visible on FF

border-style: solid outset;

To your 

.bubble:before, .bubble:after {

(Updated JSFiddle) http://jsfiddle.net/bFFrK/1

Upvotes: 5

Libbux
Libbux

Reputation: 1801

Right off the bat, I'm thinking of two quick suggestions to try. I'm not running Windows 8, so I can't try these myself, but why not try these before we get too involved:

First one is adding the -moz prefix and duplicating some of the border styles:

.bubble:after {
border-color: #FFFFFF transparent;
border-width: 35px 0 0 35px;
-moz-border-width: 35px 0 0 35px;
bottom: -30px;
left: 37px;
}

That's just a quick thing to try out.

If that's not working, you should try adding border-style: outset; to the .bubble class (both :before and :after pseudo-classes). I would also throw in z-index values, to make the triangles slightly more compatible.

Here's the jsfiddle: http://jsfiddle.net/JJ3uk/2/

And if you want to make your life easier when creating CSS triangles, I stumbled across this great CSS triangle generator. It even includes options for backwards compatibility all the way back to IE6, if you're interested. It seems to be the best one around:

CSS triangle generator

Let me/us know if this solves the problem, or if something else does.

EDIT

You may also need to manually set the RGB values of the borders of the triangle, rather than just using transparent, since the border-style: outset may change the colour of the border in FF17.

border-color: rgba( RED-VALUE, GREEN_VALUE , BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE,  BLUE-VALUE, 0) rgba(RED-VALUE, GREEN-VALUE, BLUE-VALUE, 0) #ffffff;

Upvotes: 2

Related Questions