I've been working on CSS styles for print stylesheets and I have a problem with browsers. At the moment my styles work only on Chrome with Safari, Mozilla and Edge is a problem. In my SCSS structure files there is a _print.scss file where are styles.
#media print { // my styles }
I've done a research what might be wrong by I didn't find any help.
Related
I am building out an email, and I wanted to use position:relative to position the links where I need them to be. The only issue is iphones are affected by this change. I would like to be able to exclude IOS from seeing this change and for them to see my code without the position tag. Is there any way to exclude iphones from a CSS property?
I've tested my code on litmus and every email client works except for all of the iphones. The ipads work and all of the major email clients work as well.
Yes, it's possible if you use a CSS media query. To use CSS for non IOS devices, use the following media query:
#supports not (-webkit-overflow-scrolling: touch) {
/* CSS for other than iOS devices */
}
also, to do CSS for IOS devices only, you can use:
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
I hope this answers your question :)
I have a responsive site located here: http://wnmu.edu
Everything seems to be working just fine in all other modern browsers except IE9.
It seems like only certain #media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:
The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:
#media only screen and (min-width: 784px){
.banner #responsive_menu_toggles {
display: none;
}
}
I have capability mode off.
Thank you.
It looks like this question was asked once before, here.
Media query not working in IE9
Just in case anyone is crawling SO for an answer to this, the above
two answers aren't solving the core problem which is answered here -
CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to
disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
If you are curious I found this by searching google for ie9 #media css issues
Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.
Sigh of relief.
Just curious if there was a way to change font size on a website depending on the browser. I have an #font-face that works in Chrome and Safari, and then my alternative font choice is being used in Internet Explorer and Firefox. My alternative font choice renders larger than my preferred choice. Is there a way to change the font size for only IE and Firefox? Thanks!
You can detect the browser using JS and add a class to the HTML tag. You could use the following library for this: http://www.quirksmode.org/js/detect.html
If you add a Class for Firefox and IE, than in CSS you can use
.MSIE #mydiv
{
// Something only for IE
}
You can use CSS hacks or conditionals for load css files for a specific browser or css browser selectors...
for css hacks, check out this..https://github.com/ginader/CSS-Hacks
for css browser selectors, http://rafael.adm.br/css_browser_selector/
I've been using the script
#page {
size:A4 landscape;
}
but it only works in the Chrome browser. How to print landscape automatically with a Mozilla browser ??
Unfortunately, last I recall hearing is that the #page rule in CSS has been cut down in scope. (If anyone knows otherwise, please correct me)
If you need to have your PHP page print reliably in Mozilla (and all other browsers), what about using server-side PDF generation? The functions in PHP to support this can be found at http://www.php.net/pdf
Firefox does not support the CSS3 Module: Paged Media. If you want to have a document thats looks the same on every printer use a PDF, since you have no control over custom extensions and user defined stylesheets.
You could try something like
#media print {
html { width:29.7cm;height:21cm;}
body{margin:3cm;}
}
but we all know about the inconsistent browser handling of the #media rules :/.
The current behavior in Chrome, Firefox and Safari when it comes to media queries and resources is to not load the resource until you need it; e.g. a mobile device with a 480px resolution will not load images inside of max-device-width: 1000px rule. Naturally this is great for keeping weighty desktop resources away from mobile devices.
I am running into inconsistencies with this approach when it comes to loading font resources. The following will load the web font for all browsers listed above EXCEPT IE9
#media screen and (max-device-width: 1000px) {
#font-face{
font-family: 'SomeFont';
src: url('../Fonts/somefont.eot');
/* full stack here etc. */
}
}
This is annoying because I want to keep a large typeface away from mobile, but IE9 will not load the font unless it is outside a media query.
Is this the correct behavior? I can't find anything about font resources specifically in the spec, so it could be that IE9 is doing it correctly (even though this is not my desired behavior). Can anyone shed any light on this?
Here's why: "At-rules inside #media are invalid in CSS2.1".
Firefox seems to respect the specification as well.
so why don't you just wrap the ie9 specific #font-face declaration in conditional comments? either that or re-declare #font-face for mobile. i'm assuming that by "mobile" you mean IEMobile? you can target IEMobile via condtional comments as well, so you could do it either way.
<!--[if IE 9]><style>
#font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); }
;</style><![endif]-->
#media screen and (max-device-width: 1000px) {
#font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); }
}
Although old, my answer can help other users with the same problem. I wrote an article on how to solve this issue that can be read here.
Basically, you can use a conditional comment plus a JavaScript based solution because IE10 ignore conditional comments.