Hi, 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.
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.
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).
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.
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.
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.
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.
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.