we have a kind of "note-function" on our portal and when I try to print this site, it's size is fine on Chrome and Internet-Explorer, but will be too small on Firefox. When i set the scale to 90% in Firefox, it looks like the Chrome/IE Version.
I tried to manipulate the body with scale() per media print, but than it looks strange...
Is there a way to manipulate the Firefox printing-option scale per css/js? Or does anyone else had this problem before? :/
I am pretty sure our customer won't listen when I tell him "Yeah just let the users change their printing options" :D
Here some Screenshots to explain what i mean:
How it should look, and looks in Chrome and IE without problems
I would try overriding your CSS when using firefox like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
See Here Targeting only Firefox with CSS
Hope it helps :)
Related
I have a very confusing issue with this line:
<body style="background-color:#100F0F;">
Simple, right? But, for some reason, I get this:
This happens with other colours too.
Here is the code for a very basic page:
<html>
<body style='font-family:Helvetica;color:white;background-color:#100F0F;padding-top:50px;'>
<h1>Hello!</h1>
</body>
</html>
This is the weird (buggy?) result:
https://i.imgur.com/hGNYDz4.png
I've never had this issue before- it just happened one day when I logged in, nothing changed.
Has anyone seen/had this (very confusing) issue before?
Your containers background is #100F0F; meanwhile the elements contained inside of it have a different background color. You need to make sure that everything inside that container has a background color of #100F0F;
is very weird, I tried in firefox, safari and chrome with your code and I couldnt reproduce the error...
body {
font-family:Helvetica;
color:white;
background-color:#100F0F;
padding-top:50px;
}
<html>
<head>
<style>
/*your css for the body would be here
or in an external .css file*/
</style>
</head>
<body>
<h1>Hello!</h1>
<div>Seems to work fine</div>
</body>
</html>
Take a look att the demo and tell me if you see a different shade. In that case it could be you chrome version.
Bit of a confusing one, the color attribute is respected on the desktop version of Safari but not on mobile.
I tested it on an iPhone 5 (iOS version 9.2.1).
Sample code (first span will appear black on safari mobile):
<html>
<head>
<style>
span { color: white; }
</style>
</head>
<body>
<span>✖</span>
<span>×</span>
<span>×</span>
</body>
</html>
and JSFiddle link: https://jsfiddle.net/9t3v8846/
Adding !important didn't do anything. Any ideas what might be causing this?
If any poor people come across this.. the way to fix this is to add a variation selector after the entity like so:
<span>✖︎</span>
Essentially what is going on under the covers is that the browser decides how to render the HTML entities.
Safari on iOS prefers to use Emoji-like rendering where possible so it ignores the CSS attribute. The variation selector used above specifies that we want to use text-like rendering causing Safari to now respect any color attributes applied to it.
If you are using less try this
#baseColor: #ffffff;
body {
color: rgba(red(#baseColor), green(#baseColor), blue(#baseColor), 1);
color:#baseColor
}
This is driving me crazy. Firefox text is 1px lower than in chrome and ie. It's not a margin or padding issue on html or body, tried that. Doesn't seem to be a rounding issue either. Here is an image:
First "Hello" is Firefox 13, Second "Hello" is IE9 and "Hello World" is Chrome.
Here is the code (pretty simple):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine and chrome frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixel Bug?</title>
<style type="text/css">
html{
font-size: 100%;
}
body{
font-size: 1em;
line-height: 1.5;
background: white url('images/grid16.png') -4px -6px;
}
p{
margin: 1.5em 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World 2!</p>
</body>
</html>
Is it just a bug? What is going on here? I don't want a FireFox only work around, I just want to understand why this is happening.
EDIT:
Upon further research it seems to be a rendering bug, but it still confuses me. For example, the height of the text should be 24px. Which shouldn't really cause rounding errors that would cause this. Yet, if I change the line-height to 23px explicitly it lines up. I have no idea why.
EDIT2: Possible reason? https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3: Lines up using a 20px font and 40px line height. Makes me think this is just so rendering bug. It's sucks cause 16/24 is pretty standard :/
See my earlier answer here::
CSS white-space and list-style-image do not stack in Firefox 11+
You are not using reset.css thus creating problems
Here you can find many links for the reset.css
Reason for using reset.css is because it will make all user-agent(browser) css to a base settings, so that they don't look different in different browsers.
Edit::
As the OP used the reset.css . I can't reproduce the issue. So the other reasons might be
Font rendering issue of different broser engine. No particuar fix Read more
Issue with hardware. Joel talks about it in his blog.
Also, I agree with what #steveax said.
Edit 2::
If you want to go in depth about it .
Raise a bug
Try tuning your browser yourself
I've made a theme for the blogging platform Tumblr, and it works fine on all browsers except IE.
IE won't fix the position of a div on the bottom of the screen, and squishes everything to the left instead of most of them being fixed to the right.
The address is 009panelstheme.tumblr.com
Here's a screenshot in IE: http://i56.tinypic.com/2b30jk.png
Same thing in Chrome: http://i55.tinypic.com/2d8172o.png
I've tried the whole Doctype thing, and I found someone who said to add this line:
<!--[if IE]>
<style type="text/css">
#media screen {
* html {overflow-y: hidden;}
* html body {height: 100%; overflow: auto;}
}
</style>
<![endif]-->
But nothing I do works.
Any suggestions would be wonderful. Thank you so much.
Your attempt at adding a doctype failed. Using IE's Developer Tools (press F12), you can clearly see it's rendering in Quirks Mode. Changing it to Standards Mode in the Developer Tools makes it work.
When I look at the source, I see this:
<meta http-equiv="x-dns-prefetch-control" content="off"/><!DOCTYPE HTML>
<html lang="en">
...
The doctype needs to be the very first thing on the page!
Where does that meta tag come from? Can you move it into the head?
Speaking of which, further down the page I see this:
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
header isn't what you should be using there. It's head. header is something else entirely.
If you look at this website with IE8 there a scrollbar on the right... How can I get rid of it? Any ideas pr tools that could help me find the error?
http://www.photocabana.net/
Does not work with IE8 Compat Mode = Off
Works in IE8 Compat Mode = On
Works in Firefox
Works in Chrome
If you use overflow:hidden on the HTML element and the BODY that should get it working in IE7 also.
Another option for your site if it's IE7 compatible already is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
http://msdn.microsoft.com/en-us/library/aa374783(VS.85).aspx
This will buy you time until you can get everything right in IE8 native.
include this in your <head> element:
<style>
html, body {
overlow-y: hidden;
}
</style>
This is css that hide the scrollbar in the html and body tags.
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp