Login/Register
CSS pseudo element ▼ becomes gibberish in IE
Asked Answered
Solved cssinternet-explorerinternet-explorer-9pseudo-element
F

3

9

I'm using the ▼ character as the content of my pseudo element:

a:after {
    content: '▼';
}

This works great in all modern (read: non-IE) browsers:

Here you see that it's working correctly in modern browsers

but in IE(9), I just get gibberish instead:

Here you see that it's broken in IE(9)

I guess this has something to do with the character encoding, but I don't know where to start.

Forejudge answered 18/3, 2012 at 16:25 Comment(1)
Have you tried content: '\9660';? Is your CSS file and web page using the same char set? Do you have a @charset in your CSS different to its MIME type? – Botelho
B
7

Make sure that both your page and your stylesheet are encoded and served as UTF-8. Most editors should be able to tell you the encoding of any open file.

You can also opt to use the Unicode sequence \9660 instead, but again you need to ensure that your documents are encoded as UTF-8 otherwise it may not work correctly either:

a:after {
    content: '\9660';
}

Or if your stylesheet has a @charset rule, it needs to point to UTF-8:

@charset "UTF-8";

Note that @charset rules need to appear at the very beginning of a stylesheet; in @imported files I believe this should not be an issue, but seeing as Sass actually combines files together that are linked by @import rules during compilation, this will cause errors. For Sass/SCSS, you'll need to place the @charset rule at the beginning of your master stylesheet.

Boylan answered 18/3, 2012 at 16:27 Comment(9)
I'm using SASS, and I just realized that they're adding @charset "IBM437"; to the beginning of my CSS file. Anything I can do about it? – Forejudge
@MegaHit: Change it to @charset "UTF-8"; – Boylan
Are you saying that I have to change it after EVERY time I save my SASS file? Is there no way to stop SASS from adding that in there? – Forejudge
According to groups.google.com/forum/?fromgroups#!topic/sass-lang/… SASS is adding it like that because your input file is encoded in IBM437; you should change your input file to be UTF-8. – Spiro
@MegaHit: It shouldn't try to change that line if you have one within your stylesheet. Can't say for sure as I don't use Sass myself though, but it shouldn't misbehave... – Boylan
@Spiro - I've double and triple checked, but my .scss file is definitely encoded using UTF-8. – Forejudge
@Boylan - Actually, it does. I explicitly set @charset "UTF-8"; at the top of my .scss file, but that didn't make it into my .css file, and I got @charset "IBM437"; instead. – Forejudge
@Forejudge Hmm. Perhaps relevant, if you're using Ruby: #5968126 – Spiro
OK, I got it to work. I had @charset "UTF-8"; set in my head.scss file, which I had then @imported into my main scss file (SASS actually pulls it into the file). Since that didn't work, I just added the @charset "UTF-8"; to the main file before any @imports, and it worked. You should update your answer with this info, and I'll accept it. – Forejudge
S
0

In addition to @BoltClock's answer, be sure to send appropriate headers from your server, and, perhaps just for good measure, add a <meta charset="utf-8" /> in your <head> tag.

Spiro answered 18/3, 2012 at 16:31 Comment(0)
H
0

You can try also by adding a background image to your menu.

 a{background:url("http://pathtoyourimage/");}
Hypnotic answered 18/3, 2012 at 16:33 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.