HTML5: Popup background transparent in IE9

[FrankyT]

I've inserted some glossary terms into an HTML5 skin. In Firefox, Chrome and Safari, as intended, the definitions pop up when the user moves the pointer over the glossary arrow icon, with an almost-opaque black background:

popup-ff.png

However, in IE9, the background is completely transparent, rendering the text unreadable:

popup-ie9.png

Has anyone else encountered this?

Thanks.

[NorthEast]

It works fine for me in IE9.
(Using the default 'modern' stylesheet, unmodified)

I'd perhaps try viewing your help on a different PC, just to make sure it's not just your PC.
You seem to have a few style issues in IE9 that I can't reproduce; this and the search box corners.

[FrankyT]

It works fine for me in IE9.
(Using the default 'modern' stylesheet, unmodified)

I'd perhaps try viewing your help on a different PC, just to make sure it's not just your PC.
You seem to have a few style issues in IE9 that I can't reproduce; this and the search box corners.

Hm. My styles for popup boxes do not seem to be the Flare default styles, which is strange as (i) I don't recall changing any of them and (ii) I can't even find a way of changing them; they are not listed in the Flare styles.

I've rebuilt the help using the Flare default styles and the popup is now grey in all browsers, including IE9 (there are not round corners in IE9 but that's not my main concern):

popup-ie-default.png

Evidently I've done something odd.

[FrankyT]

I've done some more research. For some reason, in the Flare default skin, some styles from the Flare hard-coded class .MCTextPopupBody are being overridden - but by what, I have no idea.

Here's the appearance of popups in the default skin, reported by Firebug:

popup-styles-default-firebug.png

Here's the style of the same popup in our own skin:

popup-styles-ours-firebug.png

As you can see from the strikethrough CSS entries, the background-color and color styles are being ignored in the default skin - hence the background is not the slightly transparent black specified in the stylesheet. However, where the grey colour is coming from, I have no idea.

This doesn't solve the problem of why our skin looks different in IE from other browsers, but it may be a pointer to what we need to do to get it looking how we want. However, for now I'm still stumped and would appreciate any help.

Thanks.

[FrankyT]

Well... The issue is half-solved. I fiddled with some settings and can no longer get back the semitransparent popup background. I just get the grey one (I preferred the black one, I just wanted to get it working).

I noticed that in the target file, Skin was set to "(default)". This must have been the skin I was editing (let's call it MySkin) because changes I made to the skin were being carried through.

I then changed the Skin setting in the target to point to MySkin, and the popup background changed to grey. Nothing else changed.

Flare's Help does not explain how the target chooses its default skin.

I've now changed the skin setting back to "(default)", but am still getting a grey background. The change is permanent. Weird.

In answer to the question posed in my previous post, it seems that the MCTextPopupBody class in TextEffects.css is overridden by the popupBody class in Topic.css, which seems to be the home of the grey background:

Code: Select all

.popupBody {
    background-color: #DCDCDC;
    border: 1px solid #000000;
    color: #000000;
    margin: 0;
    padding: 5px;
}

For some reason, Flare was creating an empty popupBody style when I used "(default)" as the sking setting. Now it's no longer doing this, but as I indicated, I have no idea why not.

Looks like a bug to me. Also looks like you can't change the popup appearance unless you want to faff around with JavaScript

[LTinker68]

I noticed that in the target file, Skin was set to "(default)". This must have been the skin I was editing (let's call it MySkin) because changes I made to the skin were being carried through.

Do you have more than one stylesheet, too? I've submitted a bug because the "(default)" option in the target for stylesheets doesn't work as expected. To me, if there's only one stylesheet in the project, leaving the target set to (default) means it should use that one stylesheet. However, it appears that Flare is somehow hard-coded to its default name for the topic stylesheet (Styles.css), even if you've deleted that stylesheet from the project. I had to modify the target to specifically point to the Modify.css stylesheet to get it use that stylesheet. It's possible that with HTML5 there's a similar bug with respect to the skin, even if you only have one skin in the project. In this case, it might be hard-coded to look for whatever the name of the default HTML5 skin is (I don't have Flare open to look), even if you've deleted the default one, although if you renamed I'd hope it would pick up the rename.

[FrankyT]

I noticed that in the target file, Skin was set to "(default)". This must have been the skin I was editing (let's call it MySkin) because changes I made to the skin were being carried through.

Do you have more than one stylesheet, too? I've submitted a bug because the "(default)" option in the target for stylesheets doesn't work as expected. To me, if there's only one stylesheet in the project, leaving the target set to (default) means it should use that one stylesheet. However, it appears that Flare is somehow hard-coded to its default name for the topic stylesheet (Styles.css), even if you've deleted that stylesheet from the project. I had to modify the target to specifically point to the Modify.css stylesheet to get it use that stylesheet. It's possible that with HTML5 there's a similar bug with respect to the skin, even if you only have one skin in the project. In this case, it might be hard-coded to look for whatever the name of the default HTML5 skin is (I don't have Flare open to look), even if you've deleted the default one, although if you renamed I'd hope it would pick up the rename.

Sounds plausible. I don't think I deleted the default stylesheet, because, as I say, the grey popups came back! But why they ever went away is a mystery. I may submit a bug report but right now my priority is to get the skin working.

[Suze99]

Hi,
Was there a resolution of this issue?
I'm having the same problem of the popup background going white in IE9..however interestingly, it displays correctly ( with the blackish nearly opaque background) locally on my IE9 browser, but when I upload it to the server, it goes transparent. Is there some browser setting that I'm neglecting?
I also notice that on this thread, texteffects.css is mentioned..not sure where this file is created. btw, I'm using the Flare stylesheet downloaded from their help website.
Thanks
Susan

[Suze99]

Ok, I'm posting an interim solution that appears to work. I found where texteffects.css and topic.css live (in the Outputs folder).

After trying several classes, and trying to apply a bright red background, (Scott's suggestion to make it really visible). I changed it here and it appears to work acorss both IE9 and FF, when its uploaded on a server. I have to see what happens locally when I regenerate it. No its not red here, but a tealish colour. The rounded corners work fine in FF, but not in IE9.

Texteffects.css

.MCTextPopupBody
{
color: #EBEBEB;
font-weight: normal;
line-height: 1.5em;
background-color: #3b9dbd;
width: 200px;
padding: 11px 15px;
-webkit-box-shadow: 0 4px 10px #8B8B8B;
-moz-box-shadow: 0 4px 10px #8B8B8B;
box-shadow: 0px 2px 8px 0px rgba(0,0,0,.4);
border: none !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: absolute;
left: 20px;
white-space: normal;
filter: alpha( opacity = 0 );
opacity: 0.0;
z-index: 10001;
}