In my site, I have a css file with all the media queries. how can i use a condition not to use that file if its IE8? i am using html and jquery. IE8 does not support media queries. so i want to restrict IE8 to get that media-queries.css file. but all other browsers should get it. It can be jquery or javascript.
the css is included in the head:
<head>
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!-- dont want this only in IE8 and bellow -->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
</head>
Just use:
<link rel="stylesheet" type="text/css" href="/templates/css/style.css" />
<!--[if gt IE 8]><!-->
<link rel="stylesheet" type="text/css" href="/templates/css/media-queries.css" />
<!--<![endif]-->
The code means: if greater than IE8 take notice of this html. Only IE reads these queries so by adding <!--> and <!-- other browsers just see two comments with a link to a CSS file in between.
Related
I downloaded some free web templates and updating the site as per my needs. I observed most of site content is displayed in upper case. Can someone help me, how to disable this?
Attached is the screenshot of the page. All links and content is displayed in uppercase.
How to display this in normal case letters?
Following is my html before body
<!DOCTYPE html>
<html>
<head>
<title>Freee-Learn. Your learning partner...</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Free Style Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/myJavaScript.js"></script>
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
</head>
And also i observed, when the internet is off, the site is displayed in normal case letters.
It's the fonts that you're using in the website. The fonts are downloaded from an Google API. Download the fonts to use locally or use another font.
One of the web fonts you're leveraging (Alegreya Sans SC) is only available as a small caps family. When your "internet is off", the web font is not being loaded and therefore a default family is leveraged which most likely supports lower case.
To fix this, find where you're using Alegreya Sans SC within your stylesheets and simply switch to a more multi-case friendly family.
Looks like the google font Alegreya is causing this google.com/fonts/specimen/Alegreya+Sans+SC
I have searched the other questions but I do not get anything that really solves my problem. I downloaded a template that I want to use as a small portfolio for myself. On my local server everything works fine. But when I upload it to a live server something goes wrong. I believe the problem is with the Bootstrap.js or bootstrap-theme.css
Some functions are not running and dont display at all. Such as the loading bar when you open the site, backgrounds, some images and arrows.
I have done the following.
Checked all the paths to make sure they are correct.
Made sure that it is not a cache issue.
Tried to run it in private view (still the same problem)
Checked the firefox error log but all scripts seem to load.
Here is the template demo - http://designova.net/presence/index01.html
Here is my live version - codethis.co.za
Here is the code in the head and the js at the bottom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code This - Beautiful Website Design and More</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://www.codethis.co.za/bootstrap/js/jquery.js" type="text/javascript"></script>
<script src="http://www.codethis.co.za/bootstrap/js/bootstrap.js" ></script>
<script src="http://www.codethis.co.za/javascripts/jquery.easing.1.3.js" type="text/javascript"></script>
<!-- Standard Favicon-->
<link rel="shortcut icon" href="images/favicon/favicon.ico">
<!-- Standard iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="57x57" href="images/touchicons/apple-touch-icon-57-precomposed" />
<!-- Retina iPhone Touch Icon-->
<link rel="apple-touch-icon" sizes="114x114" href="assets/touchicons/apple-touch-icon-114-precomposed" />
<!-- Standard iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="72x72" href="assets/touchicons/apple-touch-icon-72-precomposed" />
<!-- Retina iPad Touch Icon-->
<link rel="apple-touch-icon" sizes="144x144" href="assets/touchicons/apple-touch-icon-144-precomposed" />
<!-- Bootstrap CSS Files -->
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="http://www.codethis.co.za/bootstrap/css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="http://www.codethis.co.za/fonts/fonts.css" rel="stylesheet">
<!-- CSS files for plugins -->
<link href="http://www.codethis.co.za/stylesheets/pace.preloader.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/animate.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.carousel.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/owl.theme.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/magnific-popup.css" rel="stylesheet" >
<link href="http://www.codethis.co.za/stylesheets/jquery.tweet.css" rel="stylesheet"/>
<link href="http://www.codethis.co.za/stylesheets/foliohover.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/fancymenu.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/intro.css" rel="stylesheet">
<link href="http://www.codethis.co.za/stylesheets/pricing.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" type="text/css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" type="text/css" rel="stylesheet">
<!-- Main Template Retina Optimizaton Rules -->
<link href="stylesheets/main-retina.css" type="text/css" rel="stylesheet">
<!-- LESS stylesheet for managing color presets -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- LESS JS engine-->
<script src="http://www.codethis.co.za/less/less-1.5.0.min.js" type="text/css"></script>
<script src="http://www.codethis.co.za/javascripts/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="bootstrap/js/html5shiv.js"></script>
<script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
<style>
.full-height{
height: 100%;
}
</style>
</head>
and at the bottom
<!-- JS Plugins -->
<script src="javascripts/pace.min.js"></script>
<script src="javascripts/retina.js"></script>
<script src="javascripts/device.min.js"></script>
<script src="javascripts/owl.carousel.js"></script>
<script src="javascripts/waypoints.min.js"></script>
<script src="javascripts/jquery.tweet.js"></script>
<script src="javascripts/okvideo.js"></script>
<script src="javascripts/jquery.mixitup.js"></script>
<script src="javascripts/flexslider.js" ></script>
<script src="javascripts/jquery.magnific-popup.js"></script>
<script src="javascripts/smooth-scroll.js"></script>
<script src="javascripts/form-validation.js"></script>
<script src="javascripts/classie.js"></script>
<script src="javascripts/fancymenu-rollin.js"></script>
<!-- Scroll Animations Setup -->
<script src="javascripts/wow.js"></script>
<script src="javascripts/animations-init.js"></script>
<!-- Custom Scripts Setup -->
<script src="javascripts/carousel-init.js" ></script>
<script src="javascripts/portfolio.js"></script>
<script src="javascripts/intro.js"></script>
<script src="javascripts/main.js"></script>
Please could someone help me with what is going on here
Your page is riddled with 404 errors, which means either (1) your paths are not correct, or (2) the files do not exist on the server.
Something to look at would be whether you are using relative paths or absolute paths for your JS, CSS, and image assets. Remember:
paths that start with a / will resolve to http://codethis.co.za/<path>
paths that do not start with a / will resolve relative to whatever the current path is
Perhaps you are missing a subfolder in your paths?
First of all you seem to have a problem loading some of your fonts (cross-origin) It should not be linked with your problem, but you should fix it.
You also have a :
Uncaught ReferenceError: $ is not defined
which could be relative to something with your JQuery, and this could explain a lot if you're using it heavily.
From what I see in network I don't have any missing images.
Thibaut
I'm relatively new to web programming so I used a couple of templates to create my website, all of them related to Twitter Bootstrap.
My login page correctly shows Bootstrap modals. These are the imports I used there:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
The problems start with the main page after login. It was taken from another template and it uses the following imports:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
As you can see the only change is the source of Bootstrap. In the first case I downloaded it to the css folder, while in the second case it's taken directly from the server.
As a result the modals do not show in the main page (the second one). The screen fades to black but no modal is shown.
If I modify the imports of the main page to take Bootstrap from the css folder instead of the server, the modals do show, but the layout of the whole page is ruined:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-responsive.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/dashboard2.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.js"></script>
Instead of this:
Any ideas?
Have you add meta tag for responsive in head tag of the page. If not then try to add following meta tag into your head tags of the page.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this will be resolve your problem.
Note : First try this to add into your version in which you imports bootstrap downloaded files.
Ok after some research I solved my problem, I hope others will benefit from it.
This post actually solved it: here
Apparently the syntax for the modal in Bootstrap 3 is different and among other things it has to include these lines:
<div class="modal-dialog">
<div class="modal-content">
So I took the example under the link, tweaked it for my purposes and it worked. Problem solved.
As the title of this post says, since I added the fancybox's sources to my file, other js functions doesn't work anymore. If i switch the position of js source files and put mine after fancybox's js source files, my js functions work but the fancybox no, in the other hand, the fancybox work but my js functions don't.
Here is the header of my file:
<head>
<link rel="shortcut icon" type="image/x-icon" href="imagens/its.png">
<link href="css/mystyle.css" rel="stylesheet" type="text/css"> <!-- MY CSS -->
<link href="http://fonts.googleapis.com/css?family=Amaranth" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<!-- FANCY BOX SOURCES -->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- FANCY BOX SOURCES -->
<script src="js/myjs.js"></script> <!-- MY JS SOURCE FILE -->
I think that src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" is what's doing some conflict..
What can I do ?
You're importing a very old version of jQuery for your own code http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js, but then importing the latest version for Fancybox http://code.jquery.com/jquery-latest.min.js
Many things in the jQuery library have evolved since 1.3 was released almost 5 years ago, and several old APIs no longer work. The ideal thing to do would be to modernize your own code, and then just import jQuery once (a new or new-ish version).
Start by checking the error console to find out what's breaking.
Launched my website – http://www.artsbrand.co.uk – yesterday without having tested the finished product on IE. Now that I have, it initially brings up completely unstyled html, then after a couple of seconds the screen just goes blank. When that happens, this is the only thing in the source:
<script defer onreadystatechange='google.loader.domReady()' src=//:></script>
Does this have something to do with my Google Custom Search Engine?
I have a few conditional comments, which I'll list below in case they're important:
First I set up the html class (the no-js class is for Modernizr):
<!--[if lt IE 7 ]><!--> <html class="ie ie6 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 7 ]><!--> <html class="ie ie7 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 8 ]><!--> <html class="ie ie8 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if IE 9 ]><!--> <html class="ie ie9 no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"> <!--<![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" dir="ltr" lang="en-GB" xmlns:og="http://opengraphprotocol.org/schema/"><!--<![endif]-->
Then I set up three different stylesheets with media queries:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<!--<![endif]-->
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
This one's just for Sticky Footer (as per the instructions here http://www.cssstickyfooter.com/style.css ):
<!--[if !IE 7]><!-->
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<!--<![endif]-->
I only have access to IE7 and IE9, but the behaviour is exactly the same in both of those – 1-2 seconds of unstyled page (I saw a split second of CSS once in IE9!) followed by sheer blankness. I'd be very grateful for any help you guys can offer!
EDIT - I'm less convinced it has anything to do with conditional comments now – I just tried getting rid of all of them and it made no difference at all. I should probably also mention that I've tried both versions of Google CSE (Search Element V1 and Search Element V2) and the results were the same.
UPDATE - I've got a fairly messy workaround now, although the search will have to be out of action in IE for now. The problem was a combination of my dodgy use of media queries/conditional comments (I'm new to both of them!) and the still unknown issue that's causing IE to react badly with the Google CSE. So anyway here's what my stylesheet links look like now:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" media="screen and (max-width: 489px)" href="<?php bloginfo('stylesheet_directory'); ?>/device.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 490px) and (max-width: 899px)" href="<?php bloginfo('stylesheet_directory'); ?>/smallscreen.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/style.css" />
<![endif]-->
Meanwhile the search script is wrapped in [if !IE] comments.
This is just a guess because I can't get my IE7 machine to boot right now, but I think it may be because the script you have is before the closing head tag.
From what I remember, IE does weird things when you try to access elements on the page that haven't been fully parsed yet.
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); is essentially trying to insert the new script tag before the very first script tag, which is inside the uncompleted head tag.
I thought s.parentNode would be null (or undefined) in this case, but apparently it's something else, maybe the whole document? Who knows, IE does crazy things.
At any rate, what I'd try is moving that google script tag inside the body of your page, instead of in the head, and see if that makes a difference.
As for the CSS, IE before 9 doesn't support media queries. You can use something like respondjs to make it work in IE, but you need to put the queries in the CSS file, not in the link tag itself.