CSS Stylesheet not applying to copyright

Question

I have a page, title.php, that is pulled into different pages of my website. See code of title.php;

<link rel="stylesheet" type="text/css" href="title.css" />
<div class='titlebar'>
    <img src='images/Banner.jpg' \>
    <p class='title'> MY WEBSITE </p>
    <p class='copyright'>All Content is Copyright &#copy; MY COPYRIGHT</p>
</div>

I am pulling styles through for this with the following title.css;

    div.titlebar {
        display: block;
        background: #000000; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#000000, #F0F8FF); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#000000, #F0F8FF); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#000000, #F0F8FF); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#000000, #F0F8FF); /* Standard syntax */
    }
    div.titlebar > img {
        display: block;
        margin-left: auto;
        margin-right: auto;     
    }
    div.titlebar > p.title {
        text-align: center;
        color: blue;
        font-size: 30pt;
        font-weight: bold;
        font-style: italic;
    }
    div.titlebar > p.disclaimer {
        text-align: center;
        color: red;
        font-size: 24pt;
        font-weight: bold;
    }
    div.titlebar > p.copyright {
        text-align: center;
        color: blue;
        font-size: 24pt;
        font-weight: bold;
    }

Styles are applying for everything in title.php except "copyright", which remains in default style. I believe this is something to do with the copyright symbol but I have not found a solution from googling this.

What is the error in my code or my approach?

could you show a page in which the problem occurs? Also a jsfiddle/codepen that reproduces the issue would be fine. Are you maybe using an embedded font without the copyright symbol included in the available glyphs? — Fabrizio Calderan, Jan 26 '16 at 11:05

score 1 · Answer 1 · answered Mar 09 '20 at 15:23

Since this unanswered issue is still Google's first search result, I thought I'd share the solution I just found here: https://stackoverflow.com/a/38362138/2635396

While that link discusses the checkmark symbol, I just found that the same issue—emojis being used instead of standard characters—applied to the copyright symbol as well.

I had copied text into a CMS not realizing it was using the emoji, however when I replaced it with a standard character symbol (option+g on a Mac), the CSS applied as expected.

(Immediately after posting this I realized it may not count as an answer to the OP's issue, but I wanted to try to help anyone else who ended up here with the same issue I did.)

Razvan Zamfir · Accepted Answer · 2020-03-10T06:54:52.140

Is this the result you want?

div.titlebar {
  display: block;
  background: #000000;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#000000, #F0F8FF);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#000000, #F0F8FF);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#000000, #F0F8FF);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(#000000, #F0F8FF);
  /* Standard syntax */
}

div.titlebar>img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.titlebar>p.title {
  text-align: center;
  color: blue;
  font-size: 30pt;
  font-weight: bold;
  font-style: italic;
}

div.titlebar>p.disclaimer {
  text-align: center;
  color: red;
  font-size: 24pt;
  font-weight: bold;
}

div.titlebar>p.copyright {
  text-align: center;
  color: blue;
  font-size: 24pt;
  font-weight: bold;
}

<div class='titlebar'>
  <img src='images/Banner.jpg' \>
  <p class='title'> MY WEBSITE </p>
  <p class='copyright'>All Content is Copyright &copy; MY COPYRIGHT</p>
</div>

If so, then replace &#copy; with © and all will be ok.

score -1 · Answer 3 · answered Jan 26 '16 at 11:02

-1

&#copy; is invalid symbol. Try ©

answered Jan 26 '16 at 11:02

Cvetomir

29
4

This will not effect the css – Pogrindis Mar 09 '20 at 15:27

score -1 · Answer 4 · answered Jan 26 '16 at 11:06

-1

Copyright symbol should be

&copy;

not

&#copy;

I hope it will solve your problem.

answered Jan 26 '16 at 11:06

Hubert Jakubiak

853
8
19

score -2 · Answer 5 · answered Jan 26 '16 at 12:20

-2

&copy; is right code

answered Jan 26 '16 at 12:20

Muhammad Hamza Nisar

661
3
9
26

I think you've misunderstood. The copyright symbol shows, but the css stylesheet is not applied. Both © and copy; will display the copyright symbol. – acolls_badger Jan 26 '16 at 12:23
as long as i tested your code it's working fine here you can see: https://jsfiddle.net/hamzanisar/g210tf7o/ in second link i changed copyright class style it's working fine make copyright small and orange its working fine: https://jsfiddle.net/hamzanisar/g210tf7o/1/ – Muhammad Hamza Nisar Jan 26 '16 at 12:28
now maybe its because of your browser cache here your all code is working fine all CSS implemented properly working fine in your given classes on divs. You are using same style copyright or declaimer class that's why i make it different and show you it's working fine. If you are still facing this issue so simple clear browser cache and refresh your php local server because sometimes its also create this problem. – Muhammad Hamza Nisar Jan 26 '16 at 12:32

CSS Stylesheet not applying to copyright

5 Answers5