Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Windows 7 rendering web pages differently than XP or Vista

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;
}
like image 497
Alex Avatar asked Nov 30 '22 06:11

Alex


1 Answers

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.

like image 54
Matt Brunmeier Avatar answered Mar 17 '23 07:03

Matt Brunmeier