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]-->
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.
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!
`
For some reason, when trying to target my stylesheet '480pxland.css' at only my mobile device(s) when it is in landscape orientation it affects everything I have (other mobile devices, iPad, my desktop and even screens larger than 1400px). Everything before my main idex page's is listed below. Hopefully someone can see why it's not affecting just the 480pxland.css sheet.Thanks!
<!doctype html>
<html lang="en">
<!--[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>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon" />
<meta charset="utf-8">
<title>Welcome to 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'>
<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>
<link href="/jquery/jQuery.ui.js" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width: 480px)" href="/css/480px.css" rel="stylesheet" type="text/css">
<link media="screen and (max-device-width:480px) and (orientation:landscape)" href="/css/480pxland.css" rel="stylesheet" type="text/css">
<link media="all and (min-device-width: 768px and max-device-width: 1399px)" href="/css/768px.css" rel="stylesheet" type="text/css">
<link media="screen and (min-device-width: 1400px)" href="/css/1400px.css" rel="stylesheet" type="text/css">
</head>
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.
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"