CODEWITHSUNDEEP
css
user1999510
user1999510

Reputation:

Pseudo element :after not working in IE9 with content:"Γû╝"

Hi all I added content: "▼" in a CSS3 :after pseudo element and it's not working clearly in IE9.

It shows "Γû╝" like this symbol. I added <meta> tag correctly.

my css

#get-in {
  position: relative;
  margin-top: 15px;
  margin-right: 0px;
  background-color: #bfbfbf;
  border-radius: 4px;
  border: 1px solid #b7b7b7;
  width: 74px;
  line-height: 26px;
  height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 15px;
  /*text-align: center;*/
}
#get-in:after {
  content: "▼";
  font-size: 12px;
  padding: 0 6px;
  position: absolute;
  right: 0;
  top: 0;
}

is there any problem with my code or IE9 won't support..? is there any fix ?

Upvotes: 3

Views: 929

Answers (3)

Andrea Ligios
Andrea Ligios

Reputation: 50261

The immediate problem

From Declaring character encodings in CSS:

It is a good idea to always declare the encoding of external CSS style sheets if you have any non-ASCII text in your CSS file.

@charset "<IANA-defined-charset-name>";

then with UTF-8

@charset "UTF-8";

The Big Picture - a different approach

Going back to the origin of the problem, if what you need (if not, sorry for the OT... but it may be useful the same) is to place an arrow at the end of your HTML element, like a custom Select Box, or a Menù Item, then the question is simple, and no esotic characters needs to be involved:

  1. Create the desired shape with CSS only;

  2. To apply that shapes to pseudo elements, set the content to empty (content: '';), and adjust the placement with absolute: position relative to the parent element; Running Demo;

  3. To prevent the "Weird dark border" problem on firefox, always use RGBA (CSS3 RGB with Alpha-channel, set to 0 and hence transparent) instead of transparent, as described in the answer;

  4. Forget about using sort of Wingdings Fonts for graphic in your pages :)

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201728

The character encoding of the CSS file has not been declared properly. Primarily, make sure that it is actually UTF-8 encoded and declared as UTF-8 encoded in HTTP headers. You can additionally put @charset "utf-8" at the start of the CSS file.

Upvotes: 2

l2aelba
l2aelba

Reputation: 22177

Try :

#get-in:after {
  content:'\25BC';
  font-size: 12px;
  padding: 0 6px;
  position: absolute;
  right: 0;
  top: 0;
}

SRC : http://www.evotech.net/articles/testjsentities.html (Paste ▼ symbol into Paste a character here)

Upvotes: 0

Related Questions