Chrome
IE Standard mode
if you compare both the pages the IE standard mode is having little bit larger font-weight as compared to the Google chorme.
Open this page in both chrome and IE standard mode
exactly what i am saying is open whatever page you want to ,and compare it in chrome and IE standard mode . The IE standard mode is taking little bit larger css font-weight than chrome
how solve this isssue.,when i want my web page font to be neutral.. means it should take the same font which i have given in css
please give me the solution, thanks in advance
This is not an issue, this is just behavior of each browser how it behave in its different way, why because all browsers are not made of same development(Chrome, IE, FireFox).
Solution: Use reset CSS to avoid difference between browser rendering.
https://www.webpagefx.com/blog/web-design/css-tip-1-resetting-your-styles-with-css-reset/
I tried to compare it on IE11 and chrome but it looks okay on my end but if its really a bother, you can use some css hacks for IE and adjust the font size and font weight.
IE10 and IE11
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.selector { property:value; }
}
Related
I've never faced this issue ever, so I completely updated my mac + Safari (macOS Big Sur 11.2.3, Safari 14.0.3). The problem is that whatever js interaction I use on my page is bugged in Safari only (work perfectly in FF and Chrome). You can see the kind of animations I use (gradual hiding + showing of elements via max-height + opacity on click of elements) in this snippet.
The problem is that Safari behaves very weirdly with these. Sometimes, the clicked element also disappears; disappeared elements fail to reappear when the animation is reset; sometimes one of the not-clicked elements disappears on hover; etc.; really weird things. All this while no console / js error is reported, and things work perfectly smooth in FF and Chrome.
In the Internet I found countless reports about similar behaviour in Safari, but mostly the answer referred to js / css errors. My script's even written in ES5.
I checked about 100 times now, and have none of these errors.
Then I came across this post, which made me try to change the font. And indeed, everything also works in Safari when I use a default browser font as Arial, etc., but that's obviously not what my client wants.
The font of that site is Bank Gothic Light & Bank Gothic Medium, and I'm using ttf and woff files as font source files, which I define as custom fonts using #font-face in my stylesheets, and then I apply them via font-family in my stylesheets. With this, the animations have the mentioned weird behaviour in Safari. Simply when changing the font of the concerned elements to let's say Arial, it all works.
Ideally, I want every animation to work, while sticking to the Gothic fonts in all FF, Chrome AND Safari. Any clue what to do here / why this happens?
Problem solved by getting a new font source file (ttf and woff) from another source; seemed to be buggy (Nothing at all changed in my HTML, CSS, JS, PHP, not in whichever code!). I changed the title of my question to be more general, as one may (at least that was the case for me) totally not think that these Safari - rendering issues are due to the used fonts... To avoid that people with the same issue may not need to search for the reply for hours..
I have the following 2in x 1in barcode I am creating (Must be these dimensions). If the name is too long I want it to overflow:hidden. This works great in Firefox, but in Chrome it does not (See screenshots). I am guessing it has something to do with my CSS. I also verified both browsers are at default zoom.
Firefox:
Chrome:
Working demo:
http://blastohosting.com/barcode_overflow/
As you can tell in Chrome, you can see part of the words at the bottom not completely hidden.
This has to do with the rounding of the font-size.
Use an interger font-size and it will look the same in both browsers.
Ex: font-size: 13px;
EDIT: also I recommend using pixels for the dimensions, using inches may have different displays between browsers (I haven't spotted any difference but I prefer to use pixels in a pixel environment).
Chrome uses the WebKit rendering engine. Firefox uses the Gecko engine. Both interpret and display type slightly differently, as do the DirectX and Vega graphics engines used in IE9+ and Opera. You can't force browsers to render text identically.
For sub pixel problems in css
you can reset your css by http://developer.yahoo.com/yui/reset/
More information here Fonts looks different in Firefox and Chrome
I've created a website.
On all browsers, except for IE7 & IE10 compatibility it is rendering just fine.
On these specific browsers, there is weird whitespace below the page and finally the picture sliders.
I've tried targeting these browsers specifically using css hacks, however; all of these were unsuccessful.
Can this fix your problem?
CSS:
body {
background-color: #28A31E;
}
EDIT:
I'm not sure what wrong behavior do you mean. In G chrome, I see large white space below page. In IE10 I don't see sliders at all and page is very long, but it seems that is ok because of right panel...
Currently I am using FireFox latest version and IE8
To change the orientation of printing , I used
#page {
size: portrait;
}
in my css file.
#page reference
Although it claims that the #page is supported in both browsers , after my testing it is not working at all besides Chrome. I would like to know how to print the page in different orientation in FireFox / IE8.
No application should depend on this feature to work cross browser right now because the CSS3 standard on page orientation for printing is still under implementation in most browsers.
For Google Chrome it works just fine: http://dev.activisual.net/test.html
Ultimately the decision of changing the orientation relays on the user during the printing process (even if it works), so you could simply let the users know that they should print the page in landscape or portrait, but in general there won´t ever by a way to prevent the users from changing the orientation while printing on desktop browsers.
Here is a bug report for FF reported very recently:
https://bugzilla.mozilla.org/show_bug.cgi?id=851441
You can read the accepted answer on this question for reference:
Landscape printing from HTML
As the MDN reference says:
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
As far as supplying you with markup that achieves what you want, that would be outside the bounds of what's allowed on SO. In addition, it could be a bit of work since you are wanting a two generation back version of IE to attempt to perform as well as a current generation Firefox.
Page printing layout is portrait by default, to change to landscape and see the difference try the below.
The the below css code is supported since version 19.0 , try it, it should solve your problem:
For IE8 you should use HTML5 directive in your html
<!doctype html>
Css code :
#media print{#page {size: landscape}}
Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart
IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
It's weird that this
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
doesn't work for you for the latest version of Firefox as i tested it myself and works fine.
If you can't find anything have a look here even though this isn't exactly the right portrait mode (for printing) but you might get some ideas.
Lastly if you get desperate and u really need to find a way to do this, you can always take a screenshot of the web page with for example html2canvas rotate the image and then print the image instead of the webpage...
Not an ideal solution but this way you bypass the browser.
I ran into this issue a little wile ago while making a simple form.
Chrome does seem to be the best browser for limiting a users control over the printing process. However it is still limited, and Firefox/other browsers don't support #page.
My solution was to add a #media print to the style sheet to "encourage" the user to print the page in portrait. The #page is just for chrome. display: none; on the header, nav, and footer gets rid of the unwanted browser additions (this only works in chrome and firefox, in ie you still have to select no headers) I have a border:0; on input fields, because it was for a form...
Finally I put a width and height on the container div, similar to the size of a standard 8.5 x 11 piece of paper. So it would fit the page nicely.
#media print{
#page {size: auto; margin: auto;}
header nav, footer {display: none;}
input {border: 0px;}
#container {width:9.1in; height:10in;}
}
Ultimately webpage printing is still very browser/user dependent, and there really isn't much that can be done about it. Making #media print helps, but really the only way to get the page to print exactly as you want would be to generate a pdf version of the page that the user could export.
Just go to file, click on page setup and change the orientation. This works for me
This is the closest I've seen:
Changing font-size with jQuery css() function is crashing Chrome
But it didn't help.
Other threads mentioned that it's a bug in Webkit, but those were old threads and I couldn't find the bug report on Webkit's site.
The problem is that the header has a fixed width picture background and the navigation menu needs to stay within that width. I've since given up on HTML or CSS methods of accomplishing this. If you know of any, then please do share. So I've resorted to JavaScript (jQuery). And it works reasonably well, except in Chrome. The text actually increases in size for some odd reason.
Here's the simplified code in JSFiddle:
http://jsfiddle.net/alininja/j4jD9/12/
This gist of the code is this line:
$('body').css('font-size',(content_size-1)+'px');
For FireFox and Opera, the text size decreases to fit the header width, but not in Chrome.
If I run JSFiddle in Chrome everything works, but the funny behavior shows up on the actual website. This is happening on Chrome 17.0.963.56.
Thanks in advance!
If you want presentation consistency cross browser there is more involved than just setting font-size. You are assuming other font property defaults such as font-family are the same cross browser which they are not.
Use of a css reset will help