CODEWITHSUNDEEP
cssfirefox
Dan Stern
Dan Stern

Reputation: 2167

CSS transparent border showing border in Windows FF

Im creating a CSS triangle, code:

display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 0px 9px 9px;
border-color: transparent transparent rgb(255, 255, 255);
position: absolute;
top: 14px;
left: 133px;

The problem is that this triangle is rendering a border in Firefox 16.0.2 while using windows 7.

Screen Shot of triangle in FF - There are two triangles, superior and inferior, creating the same shadow Screen Shot of triangle in FF - There are two triangles, superior and inferior, creating the same shadow

I checked in MAC's FF and it does not show any border for the triangle.

The triangle displays correctly in Chrome, Safari, IE, Opera, MAC and Windows

Any idea why this is happening??

EDIT:

you can check it here: https://metrikstudios.com/want/fbapp/triangle-display.php The page displays the code shown above with a larger triangle

Upvotes: 4

Views: 535

Answers (2)

netS
netS

Reputation: 50

Do you mean the fine line between the two triangles in my example?

.one {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent transparent rgb(0, 0, 0);
    position: absolute;
}
.two {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 90px 90px;
    border-color: transparent rgb(0, 0, 0) transparent;
    position: absolute;
}


<div class="one"></div>
<div class="two"></div>

I see this line on every Browser on Win7 i have tested. I think it is rendered this way and you won't get rid of this. Fiddle

Upvotes: 0

daveyfaherty
daveyfaherty

Reputation: 4613

Try using rgba colours instead, like so:

border-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0) rgb(255, 255, 255);

The default border colour is black, so maybe these borders are a weird transition artifact. Instead of moving from invisible black to solid white, you'd be moving from invisible white to solid white.

Upvotes: 2

Related Questions