I want to know does CSS behaviour changes with different operating system. My css is working bit different for vista and win xp proffesional for same version of browser. I was testing my application on vista + ie8 and xp + ie8. It worked bit different.
Officially the CSS behavior should not change when using the same browser on another operating system(for example FireFox 3 on Windows, MacOs or Linux). Calculations of width and floats are calculated by the browser and not by the OS. However there are some factors which which will cause the site to look a bit different in another OS.
One of the issues you are getting when using another OS (or even another machine) is Font support. If you use some fonts which are only available on Windows Platforms (or are normally only available when installing a certain application) the browser will use another font, this may cause some render differences. I can even imagine it is also possible that a font is a bit different in size in Linux compared to the same font in Windows).
Another issue you are getting are form elements (like textboxes and dropdowns). These are different for each OS and especially dropdown boxes may behave different in various operating systems (the pulldown part may vary in size and textboxes sometimes have a "3d" border and sometimes only a line). You will even notice these differences when switching in XP from the XP style (the blue/green/gray one) to the classic style (the old school gray version) the dropdownfields will be a different style (and if you are aligning them with other elements you will see the size change). But most of the times these differences are only a couple of pixels and are mostly not noticed by users, but for a designer/developer it can be a bit annoying.
What change did you see? There could be minor difference due to the OS theme - elements such as buttons, dropdowns, scrollbars could be styled/sized different.
You can observe some differences even if you change themes in XP (Classic vs XP look).
There are a few things that may change cross-platform:
Fonts
The Windows "core fonts", which are supposed to be cross-platform, are not on most default Linux installs. Also, 10pt in Firefox on my Ubuntu doesn't display the font at 13px like other browsers, it's slightly bigger. Some fonts may have a different line-height too I think.
Form widgets
Buttons, textboxes, textareas, fieldsets and dropdowns are different across browsers and platforms. Opera, for example, uses its own Vista-esque skinning of form controls and each skin is different. Chrome seems to use its own stuff too.
Screen resolution
If the design is fluid like Wikipedia you will end up with very long lines of text that may be difficult to read.
Hardware
The user's hardware may also cause changes in colours or other graphical anomalies.
CSS is platform independent. But, it is browser dependent. Different browsers may implement CSS differently but different platforms with same browser will not show any change. It will be better if you can post your CSS here, so that we can debug. Of course there may be minor differences in the elements because of the theme.
There are a lot of things that can differ from one system to another. There may be differences even between two systems with the same operating system and the same browser.
CSS in itself is an independend standard, and doesn't change. However all browsers doesn't interpret css the same, and the CSS standard doesn't cover every aspect of how the page should be rendered. Also, CSS covers how code that is correct should be interpreted, but if you have something that is incorrect in your code, it's up to each browser to try to interpret it best it can.
Especially text rendering can differ a lot, as there are many factors that control it. Things like the installed fonts, the smoothing algorithm chosen and the user size setting decide how the text is drawn. There are different versions of the same font, so for example Arial on XP and Vista doesn't have to render exactly the same, as details like kerning rules and font smoothing hinting can have been reworked.
Some page elements (like buttons, form fields and slider bars) can inherit their look and size from the operating system and the user settings in the system, so they may look different.
Yes. It may change.
Element styles may be differently rendered in different visual styles[themes] of the OS.
For eg:
In some themes there will be rounded corners for fieldset and in others it won't be rounded.
Problems I am facing in different operating systems are :
1. Text with fixed width is coming in two lines in vista whereas on xp it is coming in same line.
And one major problem I am facing is some part of my design is getting distorted in VISTA + IE8 which is rendering fine in XP + IE8. To make my application compatible with IE8 I have used
tag.
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I can't for the life of me figure out why the same font that I build using gulp-iconfont renders so wildly different on Windows vs. basically all other OSes, including mobile OSes. I've tested practically all of them through Browserstack, and consistently all browser running on Windows render the font with a massive amount of space above/below each icon while all other platforms render as expected.
I highlighted the elements using the inspector for the following screenshots:
Windows:
macOS:
I think I have narrowed it down to be the font rendering, as when I change the font-family in the css, the spacing around the characters evaporates. I have messed around with the gulp-iconfont options (fontHeight is set to 1024 and font is being normalized) without success.
Is my only option to let go of compiling my own iconfont and just using svg's, or does anyone know what I might be doing wrong? I feel the stench of defeat upon me so any faint scent of hope would make me simmer with joy.
I am having an issue with a specific mac that is not displaying a certain website I have built correctly. Every other mac and pc I have tested displays the website correctly but this one specific mac in all browsers on it is displaying incorrectly the issue I am getting is inline block elements are not next to each other, I have all the 'hacks' in place and like mentioned this displays correctly on every other computer.
This question here is the exact same issue but it doesnt seem to have been resolved.
https://discussions.apple.com/thread/6650689?start=0&tstart=0
I know I could try floats but I would rather find the route of this cause, does anyone know of any reason this might be happening?
If browser renderings vary only on a single or a few machines, fonts are a possible culprit. Make sure all computers use the same fonts to render your page, actually even that the same version of the font is used.
A lot of fonts get slightly modified over time, often the kerning (space between two characters) or the hinting (how the curves that describe fonts should be mapped to pixels on the screen) might change, resulting in very minor differences in the width some text consumes when being displayed.
If indeed the font version is the culprit: Remember that visitors of your page might also have this "bad" version of the font. So it is advisable to try to improve your HTML layout.
I've often observed that leaving a few percentages empty helps to deal with such font issues. For example: having a div (width=100%) that contains two elements in each "row", the first one a label of about 1/3rd the width, and the second one being some control, taking up the rest of the space. Having them defined with width:33% and width:67% often results in the case that the second part is laid out below the first part instead next to each other. Changing the widths to something like width:32% and width:65% often fixes this, as it allows for some rounding errors in the browsers when laying out the elements.
Hi when I using photoshop the fonts are so smooth and doesn't look pixelated. Now I have seen this on many different sites, how smooth the fonts are and don't look pixelated at all.
I was wondering if there was a property or something that i can use to get the text smooth in css.
For example ---> http://css-tricks.com/forums/discussion/10533/text-smoothing/p1
see where it says '[Solved] Text Smoothing', how do i get the text that smooth without having to make the font oo big, I'm using "Arial Black" font on my site.
As mentioned in the link you shared quite a large degree of font smoothness has to do with the browser or OS that the type is displayed on.
For example, Windows uses ClearType technology to help smooth fonts. And yet, on a Windows machine, the font will look slightly different in each browser. I have noticed this effect while testing various sites across the major browsers.
Another thing about 'Generic' fonts (those included in most machines by default), is that the base font might differ slightly OS to OS etc. So for that reason you may look into a custon CSS3 font on your site so that you know that users with support for custom fonts will have a very similar appearance.
If you are set on using one of the web safe fonts, I would recommend testing various font-weights and seeing if one renders particularly well in most browsers. As the font weight correlates directly with the approximate size on screen this will affect the pixels being used and it is possible that some weights perform poorly in ClearType and related font smoothing technologies.
I would try finding an Arial lookalike otherwise.
I was reviewing the CSS docs for version 4.6 and saw this in the doc:
"In BlackBerry Device Software version 4.6, the BlackBerry Browser provides full support for CSS 2.1, excluding pseudo-elements and dynamic pseudo-classes, system fonts, and generated content."
I am running the 4.6.0.190 emulator for the bold and I cannot get any padding to work. My other CSS is working fine, such as font family and font size but that is about it. Anything related to the box model (margins, padding) and positioning does not work and according to the docs, it should.
Any suggestions?
One thing I've noticed doing development on the BlackBerry emulator is that it is very inaccurate in a lot of situations compared to the actual device.
Unfortunately I don't have a list of what things work or don't work the same as the physical device on the emulator, however I've noticed several small discrepancies that make it (in my opinion) almost useless to rely upon for development.
Many of these discrepancies are box model related. For example, the padding on the real BlackBerry Bold behaves properly, while the emulator gives more padding than it should, causing things to render wrong.
Box model related things do work on the emulators I've tried, however I've had some problems, especially related to widths of elements, however not the same issues you've described.
My recommendation is to get your hands on a BlackBerry Bold to really see what everything looks like.