I am trying to print web pages that contain external CSS references and use web fonts (I mean #font-face attribute) but in print preview the web fonts disappear. Does anyone know a solution without using the web font locally?
Looks like printing #font-face fonts is not yet implemented:
https://bugzilla.mozilla.org/show_bug.cgi?id=468568
Works as of Firefox 18! - Yippee!
inlcude the file not only for screen but also for print
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
but include the css also for print
<link rel="stylesheet" type="text/css" href="main.css" media="print" />
in your case the href should then go to an external url
Related
I’m a beginner web developer, I need help as my web page img updates do not auto refresh on client side devices. I’ve tried adding ?v=1 to img src and css. Does not work. Tried full hosting img url in css. Does not update.
Is there a way to clear the pc and mobile devices cache so my page updates everywhere when adding content and changing background img.
head...
<!--custom stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css?v=1">
<link rel="stylesheet" type="text/css" href="css/main.css?v=1" />
body...
<img src="img/logo.webp?v=1" alt="logo" />
stylesheet...
background: url(../img/landing/body2.webp?v=1);
I figured it out, I was editing the img files and saving to original file names. This caused problems with the client side image. So I renamed my img and added a date time stamp as ?v=(current date). I added the date time stamp to img, url, src in html body and head css and everywhere I edited something.
head...
<!--custom stylesheet-->
<link rel="stylesheet" type="text/css" href="css/style.css?v=30Jun2020125632">
<link rel="stylesheet" type="text/css" href="css/main.css?v=30Jun2020125632" />
body...
<img src="img/logos.webp?v=30Jun2020125632" alt="logo" />
stylesheet...
background: url(../img/landing/body2.webp?v=30Jun2020125632);
Im developing a golang webpage and am running into some troubles when deploying my page to google app engine (appspot.com). This is because Im running it using http when developing on my machine, but over https when deployed.
Google chrome doesnt like this so it blocks the content trying to be loaded over http. Im fine with this since I like security. But I cant find the source.
All my includes are https or //, or just local files.
Here is a image of the error in chrome.
This is some includes that I use. Maybe some of them is loading a font?
<link href="/static/css/googlefont.css" rel='stylesheet' type='text/css'>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="/static/css/style.css" rel="stylesheet" type="text/css">
<link href="/static/css/sweetalert2.css" rel="stylesheet" type="text/css">
<link href="/static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="/static/css/modal.css" rel="stylesheet" type="text/css">
<script src="/static/js/jquery.js"></script>
<!--<script src="/static/js/jquery.min.js"></script>-->
<script src="/static/js/register.js"></script>
<script src="/static/js/login.js"></script>
<script src="/static/js/sweetalert2.min.js"></script> <!-- Sweetalert -->
<script src="/static/js/spin.min.js"></script> <!-- ?? -->
<script src="/static/js/bootstrap.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/js/stuff.js"></script>
<script src="/static/js/flat-ui.min.js"></script>
<script src="/static/js/application.js"></script>
<script src="/static/js/bootbox.js"></script>
I cant seem to find the source..?
Thankful for any help in the right direction, i'm going crazy here..
Check all the CSS stylesheets your document is loading, including any CSS stylesheets that are getting loaded through an #import. In one of the CSS stylesheets, you most likely have a rule with a url(…) call something like this:
src: local('PT Sans'), local('PTSans-Regular'), url(http://fonts.gstatic.com/s/ptsans/v8/fhNmDCnjccoUYyU4ZASaLVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
Use the Network tab (or equivalent) in your browser devtools to get a view of all the resources your document is loading. You can sort that resource view by type. So, set it to sort by type and then look through the source of all the type=stylesheet or type=css resources to see which one has a url(…) that uses an insecure http scheme.
If someone hasn't already, there really should be a feature request lodged with Google. The fact that Chrome knows the location of the error but just displays "(index):1" in the developer console just doesn't cut it.
In the meanwhile, the easiest way to find the offending CSS in Chrome (ver 68) is to "Customize and control DevTools" by clicking on the 3 dots in the top right corner of the development console and clicking "Search" ) or "Ctrl+Shift+S". You might have to drag up the horizontal pane at the bottom of the screen.
My magento CSS is not loading, and when I try to view source, I noticed something on its src..
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce-local_comhttp://myecommerce.com/skin/frontend/base/default/css/style.css" media="all" />
its look like there's a problem in source file.
It should be like this
<link rel="stylesheet" type="text/css" href="C:\Program Files (x86)\Zend\Apache2\htdocs\myecommerce-local_com\skin\frontend\base\default\css\style.css" media="all" />
What should I do? to change the source of my style?
Thanks
Are you using an Addon like GT Speed do combine/reduce your JS and CSS files? I uninstalled it and the problem was solved.
I have a Bootstrap form made, but it doesn't appear correctly in Firefox... All other browsers seem to work. I've tried everything!
Here's the link: http://www.redmandesign.ie/bootstrap/form1.html
I think it's related to the bootstrap style sheet but I'm not sure.
Can anyone help, I'm really stuck!!!
<link href="css\bootstrap.css" rel="stylesheet">
<link href="css\bootstrap-responsive.css" rel="stylesheet">
Should be changed to:
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
Explanation: Firefox is sending a request for a file called css\bootstrap.css instead of asking for bootstrap.css in the css folder, which doesn't exist and the server replies with a 404 error. Don't you just love the subtle difference between the types of slashes? :P
In firefox , when you check for this link https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css. It shows this connection is untrusted. Accept it and Procced it from the browser. Now run the bootstrap file, it should work.
<link href="http://www.../default.css" rel="stylesheet" type="text/css" />
Could not edit 'http://...' because it is not in the Web site.
I get this error box every five minutes, how do I get it to stop telling me this?
<link runat="server" id="defaultCss" rel="stylesheet" type="text/css"/>
and on your code behind
defaultCss.attributes.add("href","http://www..../default.css");
if your css is in your website then you can use
ResolveUrl("~/default.css")
to get the url
or probably best practice is to add it to your app theme folder http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx and then not only will it be automatically added but you'll get intellisense
Well, seems like it's because you're including an href that points to a URL, instead of a relative web path.
Instead of
<link href="http://www.mysite.com/styles/default.css" rel="stylesheet" type="text/css"/>
use
<link href="/styles/default.css" rel="stylesheet" type="text/css"/>
Also, make sure your closing
/>
is valid in terms of your Doctype.