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"
Related
I'd like to use the same color as the H2 element for some text in a JSP page. But there are 7 style sheets included in the page, as can be seen from view source:
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/css/menu.css"/>
<link rel="stylesheet" type="text/css" href="/css/lib/jqModal.css"/>
<link rel="stylesheet" type="text/css" href="/css/en-US/localized.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="/css/lib/jquery-ui-theme.css" />
How do I determine which style sheet is used for the H2 element?
As the name says, CSS - Cascades. So wherever the h2 is defined, the browser fetches the rule and applies it to the page. So, let's say we have included a few style-sheets, like how I have done in my application Soceall, which has a lot of plugins CSS than my own.
If you see in the Chrome's Dev Tools Inspector, you could find all the cascading rules for, say, I picked a <h4> here:
It gets from three style-sheets and the line numbers are also displayed:
<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.1.1/css/bootstrap-colorpicker.min.css" />
<link rel="stylesheet" href="https://cdn.rawgit.com/formvalidation/formvalidation/master/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.8.0/css/bootstrap-markdown.min.css" />
So, here:
Clicking on the link, which says, style.css:277 will take you to the declaration on style-sheet as well. You can also edit the file and see the changes lively.
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'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]-->
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]-->