CSS positioning issue with Safari when using :before

Question

I'm having an issue when trying to position :before content in Safari. In Chrome/IE the content is positioned correctly, but Safari is interpreting the styles differently (see: http://jsfiddle.net/danwoods/Yb8aR/). my initial thought was to remove the position: absolute from the span:before, but that presents it's own issues...

Does anything look out of place? Any explanation as to why Safari is displaying things differently than Chrome?

Thanks, Dan

Answer 1

I'm not sure what problems you were having with removing position absolute, but I've changed it to position: relative, used top: 4px to line it up with the text, and display: inline-block to allow margin right to separate it from the text.

span:before {
    content: url(https://dl.dropboxusercontent.com/u/6114719/progress-2.png);
    display: inline-block;
    position: relative;
    top: 4px;
    margin-right: 5px;
    transition: all 1.5s ease-in-out;
    -webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
}

Fiddle is here: http://jsfiddle.net/Yb8aR/5/ - tested in Chrome and Safari.

Note: Looks like Safari aligns the before pseudo-element to the span element, whereas Chrome seems to align it to the text within the span element (which is centered). Why that happens, I'm really not sure.