CSS Transparent Border Problem In Firefox 4?

Asked 3/6, 2011 at 9:29 Answered 3/6, 2011 at 9:44

I'm trying to create a pure CSS triangle for a tooltip. All browsers looks fine except for the latest Firefox 4. Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<style>
.arrow {
    border:50px solid;
    border-color:#eee transparent transparent transparent;
    display:block;
    height:0;
    width:0;
    top:50%;
    right:50%;
    position:absolute;
}
</style>
</head>
<body>
<div style="border:1px solid #000; height:400px; width:400px; margin:50px auto; position:relative;">
    <span class="arrow"></span>
</div>
</body>
</html>

Firefox 4 Screenshot:

Firefox 4 screenshot

Other Browsers Screenshot:

enter image description here

As you can see in Firefox 4, it has something like a border. Is it a Firefox bug or this is really the behavior?

How can I achieve a pure CSS triangle without that visible border in FF4? Also, I need the other 3 colors to be transparent because this triangle will overlap some elements.

Alcaraz answered 3/6, 2011 at 9:29 Comment(4)

I'm using FF4 and I don't get this weird behavior that you describe. You are not using FF4 Beta or something? – Inwardly 3/6, 2011 at 9:34

I can't reproduce this. Using Firefox 4/Windows 7, there is no "border", and it looks like the other browsers. – Scag 3/6, 2011 at 9:35

I'm using Firefox 4.0.1 in Windows 7, I have also tried in Windows XP FF 4.0.1 – Alcaraz 3/6, 2011 at 9:38

If using dark color such as red, the border is not visible. But if using light color such as #eee, it's very visible. – Alcaraz 3/6, 2011 at 9:40

if transparent is not work for you then use rgba may be that's work.

Write:

.arrow {
    border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);
}

Eden answered 3/6, 2011 at 9:44 Comment(6)

Still it has a visible border like the screenshot. – Alcaraz 3/6, 2011 at 9:52

Hey, thanks for the answer. " border-color:#eee rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); " will do the trick. – Alcaraz 3/6, 2011 at 10:2

Note: rgba does not work in all browsers you might want to test it in IE – Joung 3/6, 2011 at 10:6

I put:

border-color:#eee transparent transparent transparent; 	border-color:#eee rgba(255,255,255,0)  rgba(255,255,255,0)  rgba(255,255,255,0);

I think it's safe? – Alcaraz 3/6, 2011 at 10:15

+1 yes the trick work in IE because IE support transparent not rgba – Eden 3/6, 2011 at 10:36

Thanks! I've been frustrated by this problem for a while. – Homeroom 15/11, 2011 at 23:42

Okay I could see the problem, and found out that if you change the border style to "outset" if will be fixed in FF4, and works in IE9 too.

That would give you something like this:

.arrow {
     border:50px outset transparent ;
     border-top:#eee 50px solid;
     display:block;
     height:0;
     width:0;
     top:50%;
     right:50%;
     position:absolute;
}

PS. I'm on Vista with the newest firefox stable.

Here is the jsFiddle: http://jsfiddle.net/UFSpd/1/

Joung answered 3/6, 2011 at 9:44 Comment(7)

I have tried the "outset" border-type before but the problem is it is not the true color anymore. #eee will become $f6f6f6 – Alcaraz 3/6, 2011 at 9:47

The "outset" border type will have true colors on right and bottom sides, but the top and left will produce different color. – Alcaraz 3/6, 2011 at 9:48

Did you use my code, that seems to be working here, #eee is still #eee and they do not have true colors see here: jsfiddle.net/UFSpd/2 – Joung 3/6, 2011 at 9:57

Btw tested the color in photoshop it is still #eeeeee – Joung 3/6, 2011 at 10:0

Yes I tested in Photoshop, it become #f6f6f6. I also tried that workaround before but I think it's only Safari that don't change the color. Other browsers will produce a lighter color if using "outset" – Alcaraz 3/6, 2011 at 10:4

Note that the top border that makes the triangle is still solid "border-top:#eee 50px solid;" – Joung 3/6, 2011 at 10:8

Yep you are doing a thing wrong with the border styles jsfiddle.net/HVam7/2 updated it to be like my example and now it works :) – Joung 3/6, 2011 at 11:4

Recommended topics

Hot tags