different behavior of computing div width between desktop an

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
Packes
Posts: 1
Joined: August 14th, 2014, 9:17 pm

different behavior of computing div width between desktop an

Post by Packes »

Hi everybody.
I have a strange problem regarding the css styling of a div element.
Please see the following codepen:
http://codepen.io/pchorus/pen/cdulk

In this example, the div container should have a width of 0px, a height of 0px, and a black top border with a width of 7px.
The left and a right borders have a width of 7px as well, but they are transparent.
This leads to a black triangle.

When I check the styling of the div element on my desktop, I see the expected values:
border left, top and right: 7px
width: 0px
height: 0px

The same codepen example running on my laptop leads to the following values:
border left, top and right: 6.4px rounded to 6px
width: 1px
height: 0px

Since I use the triangle for a popup, it is necessary to have the exact coordinates. Otherwise there is a gap between the popup and the triangle.
Could you please help me with that problem?

Best regards.
Pascal
Post Reply