CODEWITHSUNDEEP
csstransparentfirefox4
bloggerious
bloggerious

Reputation: 347

CSS Transparent Border Problem In Firefox 4?

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.

Upvotes: 16

Views: 6129

Answers (2)

sandeep
sandeep

Reputation: 92803

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);
}

Upvotes: 24

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

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/

Upvotes: 11

Related Questions