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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With