stuck with css ::before pseudo-element not working on apple devices

[totoff]

hi folks,

a client of mine reports broken styles on his website when viewed with apple devices (ipad, iphone, macbook pro). affected are list styles i realised with css ::before pseudo element. this is the css:

#main ul > li:before {
    color: #005AAA;
    content: "–";
    display: inline-block;
    font-weight: 600;
    width: 20px;
}

you can see the problem here if you are on apple: http://www.praxisbedarf-mainz.de/sortiment/verbandstoffe/

me too, i can reproduce on several apple devices but i have no clue what goes wrong. i've searched the whole internet but it seems as if all safari editions back to version 2 should be fully compatible with pseudo-elements and no similiar problems are reported on the usual forums like stackoverflow etc. sure, i've already tried to replace the content inserted by ::before with another content. but it returns a mess no matter what i insert.

is there anybody in this forum who has come across the same problem or has any advice on how to track down the problem? i would greatly appreciate your advise.

thanks for your help!

[Martijn Geerts]

Maybe you forget the . before .main.

Try to remove the - sign and add it. Safari outputs ÔÇô instead of the -

If you own BBEdit. Trow your Document in, go to text, and click Zap Gremlins.

[totoff]

hi martijn,

unfortunately not. just a cut-and-paste error.

[totoff]

thanks martin for taking your time to help me. i think i might have found the answer. seem as if sass outputs a wrong charset declaration, see here.

i'll give this a try later tonight and report back. anyway, strange things happen with all this new technologies ...

[Martijn Geerts]

It's old thing those gremlins.

Old versions of Safari indicates an alert sign in the right bottom of the window when safari discovered sucha weird character.

[totoff]

declarating the charset in screen.css with @charset "UTF-8"; has solved the problem. it's a paricularity of sass.