Forums

I have searched the forum and found that many people have had an issue with IE9 not showing the validation tooltip background. See attached image for an example.

After reviewing the developer tools for errors, i have found that IE9 interprets the background URL uniquely.

Part of the CSS for the pop up bubble from components/com_chronoforms/css/formcheck/theme/white/formcheck/formcheck.css is:

.fc-tbx .tl{background:url('img/tl.png') no-repeat}

IE8 and all other browsers display this as:

.fc-tbx .tl {background: url("img/tl.png") no-repeat scroll 0 0 transparent}

But IE9 displays this as:

.fc-tbx .tl {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='http://www.xxx.com/components/com_chronoforms/css/formcheck/theme/white/url("img/tl.png")', sizingMethod='crop')}

I am not sure why this happens or how to fix it. I have seen others force the page to load in IE8, and while this is a temp fix that will work, i would prefer a permanent solution.

To see this in action, check your sites in IE9, or view my current development site while it is unlocked, goo.gl/LfxQf.

Thanx in advance...

I've run into the same issue. Glad there are others who have seen this weird behavior as well.

Did you end up finding the solution?

Here's a form that exhibits the problem:
http://www.haverly.com/mug-register?view=form

(Doesn't need to be filled out. Just hit the submit button with an empty form.)

EDIT: Looking at the "fc-tbx" elements in IE10's developer window, the background-image CSS property contains the value "none". If I manually override it with url(img/tl.png) and so forth, the background image displays correctly; however, IE9/IE10 seems to be completely ignoring the CSS background-image property in the formcheck.css file.

I am not a JS expert, so i am not sure this is the cleanest fix.

Open components/com_chronoforms/js/formcheck/formcheck-yui.js and look for:

var a=(k.backgroundRepeat=="no-repeat")?"crop":"scale";k.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='"+g+"', sizingMethod='"+a+"')";k.backgroundImage="none"

Looks to me that this tells IE to handle the background image differently, possibly to appease IE6(?). I removed this line and check the major browsers including IE7-9, and it looks good to go.

If there is a better way to recode, please feel free to share.

Thanks for the suggestion. It works excellently!

Hopefully this can get resolved in future chronoforms versions so we won't have to manually apply this fix each time.

Cheers🙂