Using boxsizing.htc is not working for me. The answers to other posts here on Stack Overflow have not worked for me:
Zerb Foundation 3 - IE7 Fix not working?
Making Zurb's Foundation 3 work with IE7
Here's what I did:
Created the boxsizing file in TextEdit, put the code there, named it boxsizing.htc, saved as Unicode 8.
Uploaded to my javascripts directory, at my domain root.
Added this to my stylesheet:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(http://mydomain.com/javascripts/boxsizing.htc);
}
Added this to the htaccess file:
AddType text/x-component .htc
To be safe, I made sure that jquery and modernizr are linked before the stylesheet is, just in case the htc file needs jquery.
Still no results. Any ideas?
The site is http://bureauforgood.com/index.php
Thanks!
Have you tried using *behavior: url(/javascripts/boxsizing.htc);?
I had to fiddle with the path to get this working.
Related
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
I have blueprint 90% working, and am able to implement the features - except for the icon library. I've tried several other UI toolkits, and this is the first one which I've had Icon issues with.
I have tried dumping the icons and CSS files directly into my meteor client folder and relinked the CSS dependencies, so it shouldn't be a file access issue. I would just use a different icon library, but it's a lot of work to re-link everything through the CSS file
#font-face {
font-family: "Icons16";
font-style: normal;
font-weight: normal;
src: url("icons-16.eot?#iefix") format("embedded-opentype"), url("icons-16.woff") format("woff"), url("icons-16.ttf") format("truetype"); }
I'm sorry, I don't understand the actual issue you're facing. I haven't used Meteor in some time, either, so I can't help there.
We use postcss-copy-assets in our build to ensure that the font files and other images used in the CSS files get copied to the correct place at build time.
I have a SPA project in VS 2013 using Angular.js and HotTowel and Breeze. It works fine on my development machine but when I deploy it to IIS 8.0 on a webserver running Windows Server 2012 it fails. The framework loads but it does not load my default view. It simply flashes the splash page and shows an empty browser.
I can walk through the js code using the Developer Tools but it never loads my default view into the index.html.
Using the developer tools in IE, I set breakpoints in the config.route.js to walk through the process of determining what page will be loaded into the SPA. It appears to be coming up with the correct page. The page that is supposed to load is called request.html so I also placed a breakpoint in the request.js to see if it was failing on the load. It never hits this breakpoint.
I am hoping that perhaps somebody has run into these same or similar issues when deploying an SPA to IIS.
Thanks for any help that can be given. In the meantime, I will keep searching.
JG
Success at last! As stated in the comments I found there were some path issues in the index.html. I managed to fix the problem by removing the leading '\' from the data-ng-include for the shell.html.
Was:
<div data-ng-include="'/app/layout/shell.html'"></div>
Now:
<div data-ng-include="'app/layout/shell.html'"></div>
This enabled the code to find the proper directory level for the shell.html. I was concerned that this would break the code for the dev environment but it works fine.
I then found that I needed to fix similar paths in the directives.js file in the function for the ccWidgetHeader. The templateUrl had to be modified.
Was:
/app/layout/widgetheader.html
Now:
app/layout/widgetheader.html
Finally I had to modify the style.css to fix a path for a logo image in the header.
Was:
.navbar .brand {
background: url(/content/images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Now:
.navbar .brand {
background: url(images/fcma-biostar.png) no-repeat left center !important;
margin-left: -6px;
padding: 35px 50px;
}
Many Thanks! to PW Kad and fops for chiming in on this issue!
well just a guess, of course a blank screen can be caused by way more reasons that the one mentioned here.
in my case i had to turn off the minification in the BundleConfig.cs code:
BundleTable.EnableOptimizations = false;
(consider this as a workaround. To fix it definitely its worth a try to check the dependency injection part of your angular code)
I try to make responsive design website using:
TYPO3
Foundation framework
extension adx_adaptive_images
The TYPO3 and foundation framework work pretty cool, but adaptive images doesn't resize images at all.
Previously I try with http://adaptive-images.com/ but I have the same problem.
I use default .htaccess file
Any suggestions?
The problem was: no img { width: 100%; }in css file
whats the default padding for a jquery button? tried to download and search the dev pack... :( did not fint it :(
From the stylesheet:
.ui-button-text-only .ui-button-text {
padding: .4em 1em;
}
As one of the commenters mentioned, it's very easy to find this out by using the firefox plugin firebug, or by using the web inspector in Safari/Chrome