I'd like to serve IE7 only the lower media queries (because I don't want to fix all the higher layouts), but I can't get conditional tags to work with this. Am I doing something wrong?
I've used respond.js (https://github.com/scottjehl/Respond), so it should be fine, but the conditional tags prevent all browsers from loading the higher media queries.
What should happen is that all browsers should load all media queries, whereas IE7 and downwards should only load my 601.css and 768.css stylesheets
<link rel="stylesheet" type="text/css" media="all" href="http://www.example.com/style.css" />
<link rel="stylesheet" href="http://www.example.com/mq/601.css" type="text/css" media="(min-width: 601px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/768.css" type="text/css" media="(min-width: 768px)"/>
<!--[if gt IE 7]>
<link rel="stylesheet" href="http://www.example.com/mq/1024.css" type="text/css" media="(min-width: 1024px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/1280.css" type="text/css" media="(min-width: 1280px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/1600.css" type="text/css" media="(min-width: 1600px)"/>
<![endif]-->
Right, got it. It seems that gt IE 7 only includes all IEs upwards. Instead we need to also include browsers that are NOT IE too.
so...
<!--[if (gt IE 7)|!(IE)]><!-->
<link rel="stylesheet" href="http://www.example.com/mq/1024.css" type="text/css" media="(min-width: 1024px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/1280.css" type="text/css" media="(min-width: 1280px)"/>
<link rel="stylesheet" href="http://www.example.com/mq/1600.css" type="text/css" media="(min-width: 1600px)"/>
<![endif]-->
Related
I have my main.jsp page wich contains this code:
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<script src="/targets/js/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/targets/jsp/uploadify.css">
<link rel="stylesheet" type="text/css" href="/targets/css/cssPicker.css">
<!-- ko template: { name: showView } --><!-- /ko -->
It is initializing some components as scripts and css. I'm calling cssPicker.css which contains the below code:
<!--[if IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/jsp/targetsMSIE.css">
<!--[endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
<!--<![endif]-->
But the style is not applying.
I have never played with css before and I'm pretty sure that the way I'm trying to call the sheet is incorrect. Please give me an advice on how to call correctly the sheet when someone is using IE and when someone is using another browser.
All versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
All browsers except IE
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
All browsers.
<link rel="stylesheet" type="text/css" href="/targets/css/targets.css">
Conditional Stylesheets should help you to understand better.
I doubt you are not referring CSS locations properly "/targets/jsp/targetsMSIE.css" should this be "/targets/css/targetsMSIE.css"
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!
`
This is my website, it works fine on chrome, firefox and IE 9. When i try it on IE 7 & IE 8 the IE comments that I use for css is not showing at all. My website: http://www.chan-leung.com
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/ieHacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/ieHacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
The css files works fine locally, but when i upload to my hosting, the css doesn't show. I'm using IE debugger for browser testing (for IE). The F12 key for IE. When i try to look up ieHacks.css & ieHacks7.css, nothing is showing. I'm stump as to what would be the reason why the ie comments is not working.
Any help or suggestion would be greatly appreciated.
Perhaps you have names the css files incorrectly?
You site is maybe trying to use css/ieHacks.css and css/ieHacks7.css but the actual files are css/iehacks.css and css/iehacks7.css
Also try using absolute urls and see if it makes a difference e.g:
<!--[if lt IE 9]>
<link rel="stylesheet" href="/css/iehacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/iehacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
Also, just a note, you are doing a more general assignment first and another more specfic one second, was this intended? The first css file will be applied to ie7 as well as the second, more specific one.
UPDATE:
Your site css seems to be the following which isn't like you said in your question:
<!--[if lte IE 8]>
<link rel="stylesheet" href="css/iehacks.css" type="text/css" media="screen, projection" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/iehacks7.css" type="text/css" media="screen, projection" />
<![endif]-->
<!-- [if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![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"
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<link rel="StyleSheet" href="style.css" />
while using this, the content in IE is also affected by style.css and ie.css, i'm not sure how to go about fixing this.
It is supposed to be.
You have some HTML which is only for IE, and some that it for general use.
The usually approach is to:
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
And have ie.css contain a tiny amount of CSS to fix things that break with the general stylesheet.
If you really want to have completely separate stylesheets then:
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->