I have question why Less Css not working (page without applied stylesheets) on this both browsers? On IE9+ it looks normal like on Chrome, FF and Opera too.
Look on screens:
Source
code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
</head>
<body>...</body>
</html>
IE10 (IE9 look like here)
IE8 (look on last style which jump over head section)
Are you see here something wrong what I cannot see?
It seems you are trying to use LESS files on your site without including the less.js library, which is required to translate your LESS code into CSS that the browsers can understand.
Download less.js from the top of the page at lesscss.org, and then include it just before your </head> tag:
<script src="less.js" type="text/javascript"></script>
Obviously you'll need to change the path to wherever you store the JS file on your website. Please note that this file is to be included after your stylesheets.
Example with your posted code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mansion</title>
<link rel="stylesheet" href="/Content/normalize.css" media="all"/>
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,700,900,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'/>
<link rel="stylesheet/less" href="/Content/siteHD.less" media="screen and (max-width: 1920px)" />
<link rel="stylesheet/less" href="/Content/site1024.less" media="screen and (max-width: 1024px)" />
<link rel="stylesheet/less" href="/Content/site768.less" media="screen and (max-width: 768px)" />
<link rel="stylesheet/less" href="/Content/site640.less" media="screen and (max-width: 640px)" />
<link rel="stylesheet/less" href="/Content/site320.less" media="screen and (max-width: 320px)" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>...</body>
</html>
On another note, you should probably take a look at compiling your LESS code to one or more CSS files using one of the available compilers. Check out the list of available GUI compilers that use LESS.
Related
I 've just finished my media queries and everything's fine on mobile devices. Problem came up when testing on real PC, and real viewports. No 404, no error, CSS's validated via jigsaw, added and removed slashes on href's, css files are visible and linkeable, etc. Been reading many questions similar to this one of mine but without any results. Using chrome dev tools so let's see the code, ok?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta content="#1C002A" name="theme-color"/>
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="true" name="HandheldFriendly">
<meta content="width" name="MobileOptimized">
<link href="/assets/css/minima.css" media="screen and (max-width: 566px)" type="text/css" rel="stylesheet">
<link href="/assets/css/567minima.css" media="screen and (min-width: 567px) and (max-width: 767px)" type="text/css" rel="stylesheet">
<link href="/assets/css/768minima.css" media="screen and (min-width: 768px) and (max-width: 959px)" type="text/css" rel="stylesheet">
<link href="/assets/css/960minima.css" media="screen and (min-width: 960px) and (max-width: 1199px)" type="text/css" rel="stylesheet">
<link href="assets/css/1200minima.css" media="screen and (min-width: 1200px)" type="text/css" rel="stylesheet">
After that codeblock ther's only a manifest.json and head closing tag.
Pure html, vanilla javascript, no less/sass, no ext libraries.
Where am I going wrong please guys, tried a lot of variations from various sources, but to no avail - Here is the code, I hope you can help as going slightly bonkers - thanks in advance guys...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="shortcut icon" href="assets/img/favicon.ico">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.jpg">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.jpg">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.jpg">
<link rel="stylesheet" type="text/css" href="assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
First: I would try adding an additional forward-slash before your CSS paths, e.g.
<link rel="stylesheet" type="text/css" href="/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/style.css" />
If that doesn't work, then try testing the absolute paths in place of the relative ones, e.g.
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/custom-animations.css" />
<link rel="stylesheet" type="text/css" href="http://www.daveswebsite.com/assets/css/style.css" />
If the latter still doesn't work, then there could be a problem with the formatting of your CSS file(s).
Both of my last 2 css pages (800px.css and 800pxland.css) are being neglected in rendering my website on a tablet device. I cannot figure out why, all of the other ones work just fine. As a matter of fact, they worked just hours ago but now no matter what I change and to what degree I change it, nothing works. I just started using Bluehost's CloudFlare service so I'm not sure if that has something to do with it (yes, I am FTP'ing while in dev. mode on CloudFlare). I have been using google chrome as my browser on the tablet the whole time. Ill get the posted p and hopefully it'll help. Thanks!
<head>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="expires" content="Fri, 30 Dec 2022 12:00:00 GMT">
<title>About EDM Uncovered</title>
<link href="/css/12gs.css" rel="stylesheet" type="text/css">
<link href="/css/reset.css" rel="stylesheet" type="text/css">
<link href="/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Autour+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Jura:400,600,500,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Monoton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Days+One' rel='stylesheet' type='text/css'>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery/jQuery.js"></script>
<script type="text/javascript" src="/js/protoFluid3.02.js"></script>
<script type="text/javascript" src="/js/unslider.min.js"></script>
<script type="text/javascript" src="/js/jquery.fittext.js"></script>
<script type="text/javascript" src="/js/active.js"></script>
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:600px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1300px) and (max-device-width: 1399px)" href="/css/1300px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width:800px) and (max-device-width:1300px) and (orientation:landscape)" href="/css/800pxland.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if lt IE 9]>
<html lang="en" class="ie8">
<link rel="stylesheet" type="text/css" href="/css/ie8-and-down.css" />
<![endif]-->
<!--[if IE 9 ]>
<html lang="en" class="ie9">
<link rel="stylesheet" type="text/css" href="/css/ie9.css" />
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
</head>
As a matter of fact, they worked just hours ago...
If by this you mean that the 2 ipad CSS stylesheets were working and now they aren't, then to me it's implying either an issue with them being cached via CloudFlare or there's a CSS error on the stylesheets or styles from another stylesheet are taking precedent.
You could test each possibility by
save duplicates of the last 2 stlyesheets and update the HTML accordingly
eg <link media="screen and (min-device-width:601px) and (max-device-width:800px) and (orientation:portrait)" href="/css/800px-alt.css" rel="stylesheet" type="text/css"> . This would rule out a caching issue
validate the last 2 stylesheets # W3 CSS validation
add a new test selector on each of the last 2 stylesheets and see if you can get it to stick, eg body{background-color:green !important;
These are the most likely causes that come to mind for me.
Good luck!
`
I'm creating a responsive website using several stlyesheets. Everything works fine in IE 9, Firefox and Safari, but the when I view the site in IE 8 or below, the styles disappear.
You can view the site at http://stevepolitodesign.comlu.com/ (I am hosting it for free for debugging purposes, so it may be down periodically)
Here is the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Steve Polito Design</title>
<!-- CSS -->
<link href="css/wide.css" rel="stylesheet" type="text/css" media="screen and (min-width: 1501px)" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1500px)" />
<link href="css/medium.css" rel="stylesheet" media="screen and (min-width: 401px) and (max-width: 800px)" />
<link href="css/narrow.css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 400px)" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="css/iphone.css"/>
<link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- #font-face -->
<link href="fonts/#font-face.css" rel="stylesheet" type="text/css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="js/site.js"></script>
</head>
The media attribute is part of CSS3 and is therefore not supported by IE 6/7/8. See this article, http://nicolasgallagher.com/mobile-first-css-sass-and-ie/, for more information about it.
The quick solution is to add some lines that link to css files that are hidden to all but IE6-8.
<!--[if (gt IE 8) | (IEMobile)]><!-->
<link rel="stylesheet" href="/css/style.css">
<!--<![endif]-->
I am experiencing a strange issue while trying to print in Internet Explorer. I have only tested with IE8.
My stylesheets with media="screen" are being applied even when printing. My page prints properly in Firefox/Chrome.
My head element:
<head>
<meta charset="utf-8" />
<title>Page title</title>
<link type="text/css" rel="stylesheet" href="/styles/reset.css" media="all" />
<link type="text/css" rel="stylesheet" href="/styles/global.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/site.css" media="screen" />
<link type="text/css" rel="Stylesheet" href="/styles/jquery.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/forms.css" media="screen" />
<link type="text/css" rel="stylesheet" href="/styles/print.css" media="print" />
<script src="/scripts/jquery-1.4.4.min.js"></script>
<script src="/scripts/jquery-ui-1.8.8.custom.min.js"></script>
<script src="/scripts/modernizr-1.6.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/scripts/selectivizr-1.0.1.min.js"></script>
<![endif]-->
<script src="/scripts/colorbox/jquery.colorbox-min.js"></script>
<script src="/scripts/global.js"></script>
<script src="/scripts/site.js"></script>
</head>
I have tried searching, and I have not been able to find any related issues. Any help is greatly appreciated.
Can you provide us a link?
This might be a probable solution.
Try switching your print stylesheets' rel value to rel="alternate"