How were you including your custom theme? Did you also include the images folder when using your custom theme. Please change it back and show me the <head> of your document and I'll see if I can help out.

thefly73

Re: data-icon not showing in Internet Explorer 8

8 years ago

Hello Haga,

thanks for your advice!

I just switched to my customized theme, replaced the images and all the themes folder and uploaded it all to my site. I also changed the <head> section as you can see here:

<head>

<title>Selezione Famiglia</title>

$('#uptotop').live('click', function() {

$('body, html').animate({scrollTop: '0px'}, 1000, function(){ $('body').clearQueue(); });

});

</script>

</head>

As a result, IE doesn't display icons anymore again :-\

thefly73

Re: Re: data-icon not showing in Internet Explorer 8

8 years ago

I found what is the problem... it is very tricky and it took me quite a while to figure it out, so I want to share it with all the community.

You can go to ThemeRoller http://jquerymobile.com/themeroller/ and change everything you want, but if you want the icons displayed in IE8, you need to leave untouched the Global > Theme Settings > Icon parameters, otherwise the icons will not be displayed (all other browsers will keep displaying them correctly).

I think this happens because IE has problems with icons transparency and css settings, so, for better compatibility, I decided to leave the "shades-of-grey" icon style, without further changes to that.

Thank you, hope this will help someone else

Andrea

montia_jq

Re: data-icon not showing in Internet Explorer 8

8 years ago

Hi Andrea,

Thank you for sharing. This pointed me in the right direction. I imported my existing custom jQuery Mobile 1.1.0 theme into ThemeRoller and changed the icon settings back to the default settings. However, the icons were still not visible in IE8.

After some investigation, starting from the default theme, and looking at the differences in the .css file, I finally found what was broken in my custom theme and what caused the issue.

When you as much as click into the DISC COLOR and DISC OPACITY settings, even without actually changing these settings, and then download the default theme, the background color in the following code in the .css file is changed from #666666 (the default setting) to #FFFFFF.

.ui-icon,
.ui-icon-searchfield:after {
background: #666666 /*{global-icon-color}*/;

I edited my custom stylesheet to have a background color of #666666 and the icons became visible in IE8.

This same behaviour also applies to the two DEFAULT ICON settings, and to different versions of jQuery Mobile (e.g., 1.2.0).

Thanks again,

Monica

thefly73

Re: data-icon not showing in Internet Explorer 8

8 years ago

Thank you so much Monica,

I think yours is the best solution to the ThemeRoller icon bug.

I hope this will be useful to many developers :)

Top Reply

Response title

Attachments

jQuery Forum

data-icon not showing in Internet Explorer 8

Replies(6)

Re: data-icon not showing in Internet Explorer 8

Re: Re: data-icon not showing in Internet Explorer 8

Re: data-icon not showing in Internet Explorer 8

Re: Re: data-icon not showing in Internet Explorer 8

Re: data-icon not showing in Internet Explorer 8

Re: data-icon not showing in Internet Explorer 8

Statistics

Tags

Actions