Windows 7 rendering web pages differently than XP or Vista

Question

Since switching to Windows 7, we've noticed that several of our web pages have slight differences. It mostly shows when looking at form elements (text inputs & submit buttons). They are slightly larger/smaller by a few pixels. This seems to be browser independent - we get the same rendering issues using IE8, FF3.5, and Chrome in Windows 7. When switching to the same browser in a Windows Vista environment, the issue disappears.

What's going on? Why would an OS affect HTML/CSS elements? Am I missing something very obvious here or is something strange going on?

Here's a specific example:

HTML:

<input id="input-search" type="text" name="thesearch" value="" />
<button id="btn-search" type="submit" name="search">Search</button>

CSS:

#input-search {
    float:left;
    font-size:18px;
    color:#5b5b5b;
    margin:2px 4px 0 0;
    width:200px;
}
#btn-search {
        background:url(/images/btn_search.png) no-repeat top left transparent;
        padding:5px 0px 6px 20px;
}

Answer 1

It shouldnt, Are you running one in compatibility mode?

Answer 2

Input elements are rendered natively by the browser, and adhere to the OS's standard settings. So as long as you're talking about normal buttons, selects, and checkboxes, I think this is normal. The UI has changed, and accordingly, the style guides for rendering controls.

You can style those elements yourself, with limitations. You should be able to define a fixed size for the text labels of all controls at any rate. However if you define relative sizes, they might render differently due to different OS text size settings. I have noticed that Windows 7 is much more flexible in that respect.

Answer 3

Are you defining sizes for the input elements? If not there is no guarantee how they are rendered and that's entirely browser- or system-dependent.

Answer 4

Default buttons are affected by Windows Themes. You'll notice your buttons change if you switch between "classic" Windows and the "Silver" theme even within Windows XP, for example. You can get around this by using CSS to style the buttons.

Answer 5

If you're speaking about how the different items actually are created in Windows 7, you might want to take in account that the system maybe using different default system fonts for items. IE8 on Windows 7 is not exactly the same as on Vista or XP so it could possibly be rendering those items just a little bit different.