Reputation: 7061

Strange behavior with borders on Firefox 10 on windows

I'm trying to create arrows using borders but FF10 on win7 doesn't want to play ball.

It adds a 1px border around my border.

Here is a JSFiddle with a minimal example: http://jsfiddle.net/5jjVb/1/

It doesn't matter what color the border I set has, the extra border is always the same color.

For those of you not on FF or on window 7 here is a screenshot:

They put a border around my border so I can have an arrow in my arrow

And here is the same arrow in FF on OS X:

No extra border

I could always change the color of the arrow to the same color as the extra border but that doesn't feel right.

Upvotes: 3

Answers (3)

Reputation: 3969

And here is workout to tackle this issue. http://jsfiddle.net/5jjVb/3/

Upvotes: 2

Reputation: 92793

Give rgba() instead of transparent for transparency.For more check my this answer

Upvotes: 0

Reputation: 11623

Try this:

div {
    border: 30px solid transparent;
    border-left-color: #EEE;
    -moz-border-left-colors: none;
}

Upvotes: 0