1

I'm trying to style some of my elements using absolutely positioned :before pseudo-elements. Here is how I'm currently achieving this:

.element:before {    
    content: "";
    display: block;
    height: 0;
    width: 0;
    border: 10px solid #ad0c38;
    border-right-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    bottom: 0px;
    right: -20px;
}

The problem is, when I have a list with multiple elements styled like that, and the elements have fractioned heights (e.g. height:10.3px, remembering that you could also get fractioned numbers when using percentages), sometimes the effect will be displaced one pixel up or down. You can see this in action in the following Fiddle:

JS Fiddle with current Behaviour

Is it possible to force an element to always be rounded up (or down), so my element will always have the same pixel height after the browser rounds it?

user3424417
  • 11
  • 2
  • 1
    Do you *need* to have fractioned heights? Removing that removes the displacement http://jsfiddle.net/dAbNs/1/. Just to let you know, in Chrome, the values are truncated - http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected/4309051#4309051 – Justin Mar 15 '14 at 23:06
  • I actually need, because I do not have control of whether the element has a fractioned height or not. This [jsfiddle.net/dAbNs](http://jsfiddle.net/dAbNs/) illustrates the scenario that I'm at a little better. Note how I haven't set the height to be fractioned, but the percentage generated it. – user3424417 Mar 16 '14 at 18:23

1 Answers1

0

In your CSS, use top: 0; instead of bottom: 0;

Here is example

Patrik Krehák
  • 2,595
  • 8
  • 32
  • 62
  • This solution can fix this example, but my current scenario is a little more complicated than that. I edited my question to reflect what I actualy need, if it is possible to force an element to always be rounded up (or down), so my element will always have the same pixel height after the browser rounds it. – user3424417 Mar 16 '14 at 18:27