Wordpress Themes - WP Forum at BFA - [SOLVED] Header logo showing up intermittently in IE

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - [SOLVED] Header logo showing up intermittently in IE (http://forum.bytesforall.com/showthread.php?t=9770)

[SOLVED] Header logo showing up intermittently in IE

www.prepar3d.com

The site displays perfectly in Firefox or Chrome, but not so much in IE. There is a logo in the middle of the header banner (the one that cycles through different images) that only sometimes shows up in IE. If you click around it might show up, might not. I have tried setting the z-index but it did no good.

The same goes for the white bubbles on the sidebar widgets. They display the same intermittent behavior as the header logo.

I would appreciate any help.

The logo shows fine for me in IE and FF but I do not see bubbles in either.

I was thinking it was because I had a javascript error on the page. However, I resolved that error and am still getting the same behavior.

lmilesw, the logo should be a globe in the center of the header banner. It is an image in a div that is placed on top of the rotating banner.

Any idea what might be causing this problem?

Try turning off the fade effect for the header as a test. If that works a fairly simple way to fix this is to take all the header images and add the logo to each one in the same spot. I often do that as opposed to overlaying the logo.

I turned off the fade effect and the header logo did not show up. What gets me is that if you click around to other parts of the site, everything shows up just fine. In fact, this whole issue is actually intermittent but it shows up more often than not, especially on the home page.

Any idea as to why the widget bubbles aren't showing up?

I get the same results as you in IE. I have never seen the widget bubbles as you call them and am not sure what you mean.

As another test try turning off the image rotation.

Turning off image rotation seemed to kinda help, but when you click refresh, it exhibits the same behavior. I made sure to clear my cache after making any change.

The widgets are supposed to be encapsulated in white bubbles. Click around the site and perhaps they will show up.

I never see white bubbles. Have you done any testing with deactivating plugins?

Not yet. I am in the process of getting a test environment set up so I can deactivate plugins without killing functionality on the live page. In the meanwhile perhaps it's something with how the div is generated?

Code from FF:

HTML Code:

<div id="logoarea" style="z-index: 3000;">

        <img class="logo" src="http://www.prepar3d.com/wp-content/themes/atahualpa353/images/Prepar3d%20Logo.png" alt="Prepar3d">

</div>

Code from IE:

HTML Code:

<DIV style="Z-INDEX: 3000; ZOOM: 1" id=logoarea>

        <ignore style="Z-INDEX: 0; WIDTH: 0px; HEIGHT: 0px; TOP: 0px; LEFT: 0px">

                <?XML:NAMESPACE PREFIX = DD_roundies NS = "urn:schemas-microsoft-com:vml" />

                <DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; TOP: 0px; LEFT: 0px" coordsize = "0,0" coordorigin = "1,1" filled = "f" fillcolor = "black" stroked = "f" path = " m0,0 l0,0 qy0,0 l0,0 qx0,0 l0,0 qy0,0 l0,0 qx0,0 e">

                        <DD_roundies:fill></DD_roundies:fill>

                </DD_roundies:shape>

                <DD_roundies:shape style="CLIP: rect(1px 1px 1px 1px); Z-INDEX: 0; POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; TOP: 0px; LEFT: 0px" coordsize = "0,0" coordorigin = "1,1" filled = "t" fillcolor = "none" stroked = "f" path = " m0,0 qy0,0 l1,0 qx1,0 l1,1 qy1,1 l0,1 qx0,1 l0,0 e">

                        <DD_roundies:fill src = "http://www.prepar3d.com/wp-content/themes/atahualpa353/images/Prepar3d%20Logo.png" type = "tile" position = "1,1"></DD_roundies:fill>

                </DD_roundies:shape>

                <DD_roundies:shape style="Z-INDEX: 0; POSITION: absolute; WIDTH: 0px; HEIGHT: 0px; TOP: 0px; LEFT: 0px" coordsize = "0,0" coordorigin = "1,1" fillcolor = "black" stroked = "f" path = " m0,0 qy0,0 l0,0 qx0,0 l0,0 qy0,0 l0,0 qx0,0 l0,0 m0,0 l0,0 qy0,0 l0,0 qx0,0 l0,0 qy0,0 l0,0 qx0,0 e">

                        <DD_roundies:fill></DD_roundies:fill>

                </DD_roundies:shape>

        </ignore>

        <IMG style="POSITION: relative; ZOOM: 1; VISIBILITY: hidden; BEHAVIOR: none" class=logo alt=Prepar3d src="http://www.prepar3d.com/wp-content/themes/atahualpa353/images/Prepar3d Logo.png" isImg="true" vmlBg="http://www.prepar3d.com/wp-content/themes/atahualpa353/images/Prepar3d%20Logo.png"> 

</DIV>

Well, one of my coworkers found that if you load the page in IE and it doesn't show correctly, if you zoom in and out of the page (ctrl scroll mousewheel) then it will show up...

And it seems to continuously show after doing the zoom out and in when switching pages. HMMMMM.

two things
1) change the name of the logo image. It is currently 'Prepar3d Logo.png' get rid of the space - make it an underscore - that can cause some issues

2) I think it has to do with the following three lines in your footer. When I remove ALL THREE the logo image shows, when they are in, it does not show.

HTML Code:

<script type='text/javascript' src='http://www.prepar3d.com/wp-content/plugins/google-ajax-translation/jquery.translate-1.4.1.min.js?ver=1.4.1'></script>

<script type='text/javascript' src='http://www.prepar3d.com/wp-includes/js/jquery/jquery.form.js?ver=2.02m'></script>

<script type='text/javascript' src='http://www.prepar3d.com/wp-content/plugins/contact-form-7/scripts.js?ver=2.3.1'></script>

I have no idea why they would cause the issue, just the seem to be the problem.

Contact Form 7 seems to be the issue. When I deactivated the plug-in, all elements on the page show up fine. Perhaps something to do with AJAX?

could be. Looks like you may have to decide what you can live without.

Did some research and there's a way to disable the AJAX with Contact Form 7. Tried it and it works, just don't have the better user experience that AJAX affords.

As far as google AJAX translator, I guess I'll just have to find a different translator plugin.

Thanks for all the help you guys have given me!