Black Header / Menu in IE9 - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
January 24, 2014 at 2:02 am #214255

lathomas42
Participant

Black area in IE9:

Correctly displayed in IE10 & all other browsers:

Any ideas as to what is causing this?

January 24, 2014 at 2:25 am #214264

lathomas42
Participant

Issue is directly related to Better WordPress Minify plugin. Disabling causes IE9 to function correctly. Any resolution?

January 27, 2014 at 10:12 am #215243

Dude
Participant

Hi!

You can try W3TC: http://wordpress.org/plugins/w3-total-cache/ instead of Better WordPress Minify. Maybe BWM compresses some files incorrectly (i.e. by removing necessary line breaks, etc.) and this may break the scripts.

Cheers!
Peter

March 1, 2014 at 3:15 am #230942

GZAM
Participant

FYI – I had W3 Total Cache enabled and experienced the same IE 9 issue. To resolve, I just unchecked the CSS minify area – then clear W3 cache and browser cache. Then it worked fine. Also of interest – after disabling the css minify in W3 – I did not notice a speed hit using Google Page Speed tool.

March 2, 2014 at 4:02 am #231171
Ismael
Moderator
Hi!

I think it is about the background-color value. Please add this on Quick CSS or custom.css:
```
.header_color .header_bg, .header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
background-color: #ffffff;
background: #ffffff;
}
```
Best regards,
Ismael
March 2, 2014 at 6:42 am #231215

GZAM
Participant

Hi – I tried that – but still had black header and transparent menu background – even tried adding !important.
FYI – I made sure W3 cache was cleared – and also cleared browser cache on IE9 machine.
As I mentioned – unchecking CSS Minfy in W3 resolves this issue – but we should be able to minify the theme css files….
****There is another issue when CSS Minify is enabled with Enfold – W3 has trouble caching the pages (the W3 verify code in page source disappears)
So I don’t know if it is a W3 issue or Theme issue – but I don’t have the issue with another theme (just an FYI and not a slam – I love the Enfold theme!)

March 3, 2014 at 6:21 pm #231714

Yigit
Keymaster

Hey!

I tried to check your website but it says “Sorry, we couldn’t find the domain you’re looking for.”
Can you post the new link?

Best regards,
Yigit

March 8, 2014 at 12:54 am #234064

GZAM
Participant

not sure if you were talking to me or not since I didn’t include a link – but my website is http://www.greggonline.com/

I don’t have minify enabled so you won’t see the issue if you look on IE9

to summarize the issues:

issue 1: IE9 black header and transparent menu when W3 cache has CSS minify enabled (to be clear – you can enable Minify on general settings, but you need to disable CSS Minify in Minify tab to resolve this problem). But….

issue 2: With Minify enabled on general settings with W3 cache, you no longer get the W3 input on the page source. this is the text W3 displays at the end of the page source to show it is working and usually starts with “<!– Performance optimized by W3 Total Cache.”

As an FYI – I did not experience this with another theme I tried. For me it is not a huge issue, but not great either since I want to score as high a possible on page load times.

So I have the Minify feature totally disabled right now.

Again, I am just reporting an issue – I love the Enfold theme and recommend it when asked for a theme recommendation.

March 8, 2014 at 10:00 pm #234253
Ismael
Moderator
Hi!

How are you? I hope you’re doing well today.

Use the BWP Minify plugin again. Please add the code that I gave you on custom.css then add !important after the css values:
```
.header_color .header_bg, .header_color .main_menu ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div {
background-color: #ffffff !important;
background: #ffffff !important;
}
```
Add this on functions.php to exclude the custom.css file:
```
add_filter('bwp_minify_style_ignore', 'exclude_my_css');
 
function exclude_my_css($excluded)
{
    $excluded = array('avia-custom');
    return $excluded;
}
```
You might need to add the !important for every css values on custom.css file.

Cheers!
Ismael
March 9, 2014 at 5:37 am #234354

GZAM
Participant

I found a solution that worked for me. The css stuff doesn’t work – at least not for me.
After digging around and trying different settings, this is how I resolved the IE9 transparency issue in the header and menus. (BTW it was transparency issue not black issue – it looked black because of the background image I used).

Resolution:
W3 Total Cache
1. Go to General Settings Tab >> Minify Section >> Set Minify Mode to Manual and Save Settings
2. Minify Tab >> Scroll down to – Never minify the following CSS files: >> add “custom.css” (without quotes)
FYI – because the Minify was set to manual, you need to manually go in and make sure all the applicable areas you want minified are checked.
This resolved the IE9 transparency issue for me.
Page speed:
Basically most of the theme css files are not being minified (Google Page Insights verified this), however, the rating only went down 1 or 2 points and some pages were not effected at all for some reason.
Anyway, for me, my speed is still in the 90s for PC, even after the deduction for not minifying the css – so it is worth it in my opinion since there are still a great many IE9 users out there.
Outstanding Issue:
When W3 Total Cache Minify is enable – there is not any wording in the page source to confirm W3 is working. However, my page speed tests indicate that W3 is working – so this appears to be an annoyance issue more than a functional problem.

March 10, 2014 at 7:55 am #234555

Ismael
Moderator

Hey!

The suggestion above will also exclude the custom.css file. Anyway, glad you fixed it. :)

Best regards,
Ismael
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Black Header / Menu in IE9’ is closed to new replies.