I’ve been using the following code in Page HTML Markup to get my search field to work properly with a sprite:
<style type="text/css">
input.safari, input.safari_focus {
font: 12px Helvetica, MS Serif, Sans-serif;
border: none;
padding: 6px 20px 6px 24px;
background: url(http://www.kiramek.com/Resources/safari_search_2013.gif) no-repeat left top;
height: 14px;
width: 152px;
}
input.safari_focus {
overflow: visible;
background: url(http://www.kiramek.com/Resources/safari_search_2013.gif) 0 -26px;
}
*:focus {outline: 0;}
</style>
You can see an example in the bottom left of this page in my site:
But I am now optimizing my size for Retina displays using 2x graphics. As such, I now am wanting to use the following Page Markup instead:
<style type="text/css">
input.safari, input.safari_focus {
font: 12px Helvetica, MS Serif, Sans-serif;
border: none;
padding: 6px 20px 6px 24px;
background: url(http://www.kiramek.com/Resources/SearchField_144.gif) no-repeat left top;
background-size: 197px 52px;
height: 14px;
width: 152px;
}
input.safari_focus {
overflow: visible;
background: url(http://www.kiramek.com/Resources/SearchField_144.gif) 0 -26px;
background-size: 197px 52px;
height: 14px;
width: 152px;
}
*:focus {outline: 0;}
</style>
The problem is that IE6/7/8 don’t support “background-size” and as such my graphic appears at 100% size and is clipped on those browsers. (And please don’t tell me to “just ignore those old browsers” because 42% of my web visitors still use IE8, and 14% still use IE6/7.)
I investigated using “If lte IE8” and other such conditional statements, but there’s a problem. You see, IE9 and higher support “background-size” so I want to support IE9 & higher PLUS “all other browsers.” But how do I make such a conditional statement?
Asking my question another way…
What exact code must I write in Page Markup to display my old “safari_search_2013.gif” 72ppi graphic sprite on “IE8 and lower” while displaying my new “SearchField_144.gif” to “IE9 and newer, plus all other browsers”?
I look forward to your replies.
Thanks,
James Wages
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options