Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

stylesheet on website not working in 57

  • 14 replies
  • 4 have this problem
  • 60 views
  • Last reply by jberg1

Eyum
Eyum
more options

I've added some code (see below) to my stylesheet.css that doesn't work on new 57 browser. Why? And how can I fix this so I can use 57? 

@import url('https://fonts.googleapis.com/css?family=Pinyon+Script');
@import url('https://fonts.googleapis.com/css?family=Satisfy');

@font-face {
    font-family: calibri;
    src: url(fonts/Calibri.ttf);
}

@font-face {
    font-family: impactreg;
    src: url(fonts/impactreg.ttf);
}

#input_3_85 option:nth-child(1){
	font-family: 'calibri' !important;
}

#input_3_85 option:nth-child(2){
	font-family: 'Pinyon Script', cursive !important;
}

#input_3_85 option:nth-child(3){
	font-family: 'Satisfy', cursive !important;
}
I've added some code (see below) to my stylesheet.css that doesn't work on new 57 browser. Why? And how can I fix this so I can use 57? <pre><nowiki> @import url('https://fonts.googleapis.com/css?family=Pinyon+Script'); @import url('https://fonts.googleapis.com/css?family=Satisfy'); @font-face { font-family: calibri; src: url(fonts/Calibri.ttf); } @font-face { font-family: impactreg; src: url(fonts/impactreg.ttf); } #input_3_85 option:nth-child(1){ font-family: 'calibri' !important; } #input_3_85 option:nth-child(2){ font-family: 'Pinyon Script', cursive !important; } #input_3_85 option:nth-child(3){ font-family: 'Satisfy', cursive !important; } </nowiki></pre>

Modified by Moses

All Replies (14)

Eyum
Eyum Question owner
more options

It's a "#" before the input lines of code, not "1." Not sure why this didn't copy/paste correctly.

Also you can see how the styling should look below - first image is in 56.0.2 and second is in 57.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Did you check the Web Console for messages?

Eyum
Eyum Question owner
more options

cor-el said

Did you check the Web Console for messages?

I opened web console (in 57) - not completely sure how to use this, but went to style editor tab, and style.css - didn't see any errors.

Eyum
Eyum Question owner
more options

Eyum said

cor-el said
Did you check the Web Console for messages?

I opened web console (in 57) - not completely sure how to use this, but went to style editor tab, and style.css - didn't see any errors.

Modified by Eyum

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

No, do not go to the Style tab, but look in the Console tab for messages about CSS and possible security errors.

Can you post a link to a publicly accessible page (i.e. no authentication or signing on required)?

Eyum
Eyum Question owner
more options

In console, this is all I get:

JQMIGRATE: Migrate is installed, version 1.4.1

The page is not publicly accessible, but I'll try to make an accessible duplicate and post the URL.

Modified by Eyum

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Note that in Firefox 56 it might not be possible to use CSS rules to style a select/options drop-down list.

Eyum
Eyum Question owner
more options

Do you mean Firefox 57? It works in 56.0.2

jberg1
jberg1
more options

I'm having the same problem with several Google Fonts. Loading them through my stylesheet as I always have, and also loading them as external stylesheet in the head:

@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|PT+Sans:400 700|PT+Sans+Narrow:400,700|Roboto:400,700|Dancing+Script:400,700');

or

<link href="https://fonts.googleapis.com/css?family=Kameron" rel="stylesheet">

Then calling them in font-family: throughout my stylesheet. It does seem isolated to select fonts because some work fine. For example:

Roboto, Roboto Slab, Kameron - Don't work. Dancing Script, Zilla Slab - Do work.

Never had this problem in v56. And there is no error in Web Console showing a problem.

Any thoughts?

jberg1
jberg1
more options

Well I found the issue to my problem, it might be the same for your issue. I found that some Google web fonts don't work in Firefox 57 if they are installed on your local system also. Once I removed the font from my system, they appear on the web site again (after restarting browser).

I never had this issue with Firefox 56. Maybe something to do with the way Firefox handles fonts?

If you have the font(s) installed. Try uninstalling and the reload page after browser restart. Do they appear? Not having this problem with the other browsers.

Hope it helps.

Modified by jberg1

Eyum
Eyum Question owner
more options

Thanks. I think my issue had more to do with a form that I was using. Some of the styling of dropdowns is incompatible with 57 according to developers.

Shadow110
Shadow110
more options

Run your code through these as they make the rules governing web browsers and web code: https://validator.w3.org/ https://jigsaw.w3.org/css-validator/ and https://validator.w3.org/unicorn/


Please let us know if this solved your issue or if need further assistance.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

If locally installed fonts aren't working then this is likely a sandbox security issue.

You can set this pref to 2 or 1 on the about:config page to lower the sandbox security setting.

  • security.sandbox.content.level = 1
  • close and restart Firefox to make the change effective.

If '1' still doesn't have effect then try '0' to disable the sandbox. If this didn't work then undo/reverse the change and reset the pref via the right-click context menu to the default value.

jberg1
jberg1
more options

Thanks Cor-el, That did the trick. Mine was set to 3 and changing it to 2 solved the issue completely.

My question: Are there any other security implications to having this set to 2 that I should be concerned about?

Thanks again for the solution.