-
Posts
-
I would really need to have a workaround for the search icon not displaying in the main menu in IE8. Atm it’s like a “pause” icon instead of a magnifying glass. I still have lots of IE8 visitors and nearly everyone in my company is forced to use IE8 (for security measures or whatever) so this will definitely be a big issue.
Is there a way to fall back to an image or something if IE8 is detected?
This is very important for me!
Hi,
You can do something like this on your custom.css
#menu-item-search {
background: url(../images/layout/loading.gif) no-repeat center9;
text-indent: -9999px9;
}Replace the image URL with a search icon. Don’t remove the 9, it means for IE8 and below
Regards,
Ismael
I tried this, but for some reason it only works when I do remove the /9. Of course, as you said, this also makes newer browsers use the image.
Could it be that IE8 doesn’t understand the /9?
Testsite: http://goo.gl/s6iWu
I’d use a conditional: http://www.quirksmode.org/css/condcom.html instead – add following code to header.php (before the closing head tag):
<!--[if lt IE 9]>
#menu-item-search {
background: url(../images/layout/loading.gif) no-repeat center;
text-indent: -9999px;
}
<![endif]-->Replace the image url with an absolute url address which points to the icon on your server.
Ok, that did the trick. There is only one part missing in your code:
<!–[if lt IE 9]>
<style type=”text/css”>
#menu-item-search {background: url(http://www.transics.com/images/template/Search_trigger02_A.gif) no-repeat center; text-indent: -9999px;}
</style>
<![endif]–>
The <style> tag was not added. So just in case other people would find this useful, don’t forget to open and close the <style></style> tag around it.
Thanks, Dude!
- The topic ‘IE 8 fallback for search icon(s) in menu’ is closed to new replies.