I put this code into my <head> in order to load an additional stylesheet for IE8.
<!--[if lt IE 9]>
<link rel="stylesheet" href="style-ie.css">
<![endif]-->
I also already did this 1000 times, but this time however it is not working. It's just not loaded in IE8. If I remove the conditional comment it load's normally.
Anybody an idea?
Perhaps, since you're targeting IE8, you should keep in the type="text/css" bit which was no longer necessary in HTML5? i.e.:
<link rel="stylesheet" href="style-ie.css" type="text/css">
Is this for an HTML5 site or XHTML / HTML4? If it's for an HTML5 site, following is what I usually do for these cases, as it's a good idea to also add the HTML5 shim bit in the same conditional comment:
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
Hope this helps!
Related
I'm trying to use font awesome in dompdf/laravel but no matter what I try the icons don't show up, I've seen a bunch threads with similar or the same issue and their answers don't work for me. In my project I'm using vue.js for everything except the pdf where as far as I know I can only use a blade.
I've added this to the top of my HTML blade file
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8">
<link rel="stylesheet" href="{!! url('css/pdf.css') !!}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header></header>
<main></main>
</body>
</html>
Still no luck, the icons show up as question marks (?)
How can I fix this?
Im not sure, but try installing font-awesome with NPM in the console, npm install font-awesome and then import them into your app.scss; "#import "node_modules/font-awesome/scss/font-awesome";
You can download, customize, and use the icons and default styling manually: Download Link font-awesome Version 4.7.0
Using CSS:
Copy the entire font-awesome directory into your project.
In the <head> of your HTML, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
More Info: font-awesome
I'm using visual studio 2013 and have web essentials for update 4 (2.5.4) installed.
I'm running the web application from visual studio (I happen to be using Chrome) and bootstrap v 3.3.4.
I've removed any reference to bootstraps css file. I have my own less file that imports the bootstrap.less file
#import "../js/BootStrap.3.3.4/less/bootstrap.less";
when I hit F5, it says that my less file compiled to Test1.css.
In my master page I have a reference to the Test1.css file. So it looks something like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="CSS/Test1.css" rel="stylesheet" />
However, when the page renders it looks like this
<script type="text/javascript" src="/js/js1.11.1/jquery-1.11.1.min.js"></script>
<link type="text/css" href="/js/js1.11.1/jquery-ui.css" rel="stylesheet" />
<script src="/js/BootStrap.3.3.4/js/bootstrap.min.js"></script>
<link href="/js/BootStrap.3.3.4/css/bootstrap.min.css" rel="stylesheet" />
and it works. Where does the boostrap.min.css come from and why is it working and not using what I have in my masterpage. Further more, the bootstrap.min.css, I've looked using a dir *.css /s command and can not find that file anywhere.
Your ideas would be greatly appreciated.
Zurb Foundation 3 says is compatible with IE8. This is the reason I'm using F3.
I have problems getting to work F3 on IE8.
I tried the official http://foundation.zurb.com/docs/v/3.2.5/grid.php which seems to have the same problems on IE8 which I found on my own site.
More specifically:
Navigation is messed up (The sticky menu is comming like an unstyled
vertical ul/li)
Orbit Javascript slider component doesn't work
Initially accordition looks fine visually. However when clicked it
doen't work as expected
Reveal modals don't work
The same problems are happening on both my site and the official F3 docs page - http://foundation.zurb.com/docs/v/3.2.5/grid.php
What could be the problem?
I suspect it might be something related with including things like html5shiv, etc. However I try to stick as much as possible with how the official F3 is showing. In the demo index.html of Foundation 3 following things are included:
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!-- Included CSS Files (Compressed) -->
<link rel="stylesheet" href="stylesheets/foundation.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
<script src="javascripts/modernizr.foundation.js"></script>
<!-- Included JS Files (Compressed) -->
<script src="javascripts/jquery.js"></script>
<script src="javascripts/foundation.min.js"></script>
<!-- Initialize JS Plugins -->
<script src="javascripts/app.js"></script>
<script>
$(window).load(function(){
$("#featured").orbit();
});
</script>
Do I need to include something else? html5shiv would be enough or I need other things also?
Adding html5shiv.html solved most of the issues.
The only one remaining is that images (transparent PNGs) remain and accumulate on screen (one on top of the other) while the Orbit slider is running.
I try to include JVectorMap plugin: http://jvectormap.com.
But i need also to include respond.js for my project: https://github.com/scottjehl/Respond.
My problem is when i include jvectormap only in IE8, it works,
but when i also include respond.min.js, it doesn't work. How to solve this problem?
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
I'm trying to get media queries to work in IE8 using Webshims Lib. I've followed the setup instructions and loaded the default (all) polyfills, but it doesn't seem to work.
Am I still supposed to still explicitly include html5shiv? I thought Webshims Lib would take care of it?
Cheers.
You need to download respond.js, after adding these statements:
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<link href="css/bootstrap-ie8.css" rel="stylesheet">
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->