Peter Gaffney Peter Gaffney - 2 months ago 7
CSS Question

Weird A appearing when I animate an button in html

I have a button in html that and I have it so that once the user hovers over the button the text of the button will move to one side and arrows will appear on the other side. However for some reason when I hover over it a funny "A" with a little hat appears. This happens in all the browsers I have tried. Any ideas how to fix it?

The Html is:

<button class="button" style="vertical-align:middle"><span>Contact us today</span></button>


The CSS is:

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
border-radius: 8px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin-top: 50px;
}


.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}

.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}

.button:hover span {
padding-right: 25px;
}

.button:hover span:after {
opacity: 1;
right: 0;
}


enter image description here

Answer

This problem is most likely caused by some discrepancy between the character encoding used in your style sheet, and the character encoding used when rendering your web page.

The » character is known as Code Point U+00BB in Unicode. This character can be encoded in a few different ways, for instance when stored in a file. Most notably, it is encoded using two following two octets in UTF-8:

  Encoding    Character
  --------    ---------
  [c2][bb]    »

If your web page is being rendered using an incorrect character encoding, such as Microsofts cp-1252 for instance, the same octets will be interpreted as two single-octet characters:

  Encoding    Character
  --------    ---------
  {c2]        Â
  [bb]        »

Most of the characters in the [a0-bf] range, in many similar 8-bit character encodings, are directly mapped to the corresponding Unicode code point. By an unfortunate coincidence, when one of these characters is encoded in UTF-8, the resulting octet sequence is exactly the same but with a [c2] prefix added to it, making it look like some random character has been added to your web page.


My best guess is that your CSS file is stored as UTF-8, but your web page is being rendered using some other character encoding.

What to do:

  • Check your HTTP headers

    Your server should declare the appropriate character encoding in the Content-Type header, like this:

    Content-Type: text/plain; charset=utf-8
    

    If the charset parameter is wrong or missing, you need to fix that.

    There are several online services that can show you the actual HTTP headers sent by your server. If you validate your web page (which you should anyway) using the W3C Markup Validator, it will tell you which character encoding is actually being used.

  • Check your <meta> elements

    If your web server did not declare the character encoding in an HTTP header, the browser will look for a character encoding in the HTML source. Look for a <meta> element (in the <head> section) like this:

    <meta http-equiv="content-type" content="cp-1252">
    
  • If both of the above are present, the browser should obey the HTTP header, and only if the character encoding is missing from the HTTP header should it consider the <meta> element.

Exactly how to set the correct HTTP header depends on what web server you are using.


There are also other possible causes, such as double-encoded UTF-8, to consider. You may have to resort to downloading your rendered web page, and checking it, as well as your source files, in a hex viewer to find out exactly what is going wrong.