Logo Not Displaying in IE

Cathy, thank you for working with ElectricFeet to isolate this issue. My non-profit won’t pay for the extra charge Network Solutions will charge us for FTP access.

Sorry this has taken so long, but what you ask is a stretch for my non-techie skills. Here’s what I did.

I downloaded Notepad++ so I could edit the file. I pasted a copy of the code above where I was supposed to and uploaded via FTP–nothing changed.

Then I saved back to my original file and changed part of the code suggested. When I went to change lines 141-143, it seemed to me that they were the same as what was already there, except for the // which I think is for comments. So I changed the widith and height only.

You asked that I make it the size of my logo. My logo is a PNG file and it is 1477×472. I thought this too big so I looked on the Customize drop down and the template has the logo forced down to 250×100 (I thought this was more inline with what was being asked in your sample above).

With the second workaround, a logo did disply in EI on my wp-admin pages. I could see it in the header, although it was bitmaped (I’m not surprised going from 1477×472 to 250×100). If this is the work-around, do I use the 1477×472 number and will it size correctly? Although I could see the logo, my site had an internal server error–both in Chrome and in EI when I tried to visit it. Note, that the logo in Chrome still displayed correctly when the EI was bitmapped. So, I uploaded the original file once again and am still missing the logo in EI.

Thanks for all your help Cathy!

Yes, you should use the full size of the image (width 1477 x height 472). And yes those lines were to be commented out.

So let me get this right: you’re saying that you add the width and height, but don’t comment out lines 141-143 it works? Or are you saying you did comment them out?

I’m a bit confused about how you managed to see the logo at the same time as an internal server error. Normally when I get an internal server error, the whole screen is blank apart from the message. What am I misunderstanding?

Thanks again for your help.

I made no change to the lines 141-143 because it seemed the same as the original to me. What does “commented out” mean? I thought you wanted me to replace the code with the new code you gave. To be clear, did you intend for me to remove lines 141-143? I only changed the width and height as you described.

After I uploaded the new file, I could see the change on the wp-admin screen, but not when I went to visit the site. The site showed the blank screen with the error message as you say. But, to see the logo on the wp-admin screen was progress–there was no logo there before.

So, let me know if I need to remove the lines 141-143 and use the proper pixel size for my logo and I will try again. If not, alos let me know and I’ll wait for more of your advice.

Hi Cathy, thanks for this. Sorry for the delay in responding.

By “commented out”, I meant the addition of // at the beginning of the lines. In php, adding // at the beginning of a line tells the php processor to ignore the whole of the rest of the line (unless there’s a ?> in it, which would switch off php). So the whole lines become comments.

To sum up, what I was suggesting you do in your case, is change lines 138-143 to:

$width  = '1477';
$height = '472';
//gets height and width from image, we check if getimagesize can be used first with the error control operator
// if ( @getimagesize($logo_src) ) {
// 	list( $width, $height ) = getimagesize($logo_src);
// }

If that works, then we will have established that it’s the setting of the width and height variables though the function getimagesize that IE is somehow objecting to.

I’d do this myself, if I had access to an old IE, but I don’t. I can confirm that the above doesn’t seem to break anything in other browsers, but it remains to be seen if it will fix the IE display on the front end.

If you have this code on a public website I can verify for you. I’m running IE10 on my work laptop.

Thanks mshingledecker! OK. I have this live on darioalfonsi.com and not live on alfonsidario.it

Could you tell me if you can see the logo on one site, but not the other? (The logo is just the name in a special/wide font.)

To double check, do you have another browser you can also test? I’ll leave this implemented until I hear from you.

ElectricFeet, I checked both sites using IE10 and the latest versions of Firefox, Chrome, and Safari (all running Windows 7). In all cases I could see the logo. Having said that, I believe you asked me to check one of these sites before and I was able to see the logo in IE10 at that time which makes this more vexing.

It’s frustrating for me too! ??

This bug seems to happen for some people, not all and tracking it down is really hard.

Cathy’s input is really helpful because she has FTP and IE to test.

If you feel you want to be technically challenged, I could take you through how to do this on your own site (even without FTP), but it’s dangerous, because a misplaced semi-colon could cut you off from your WordPress dashboard. (NS could get it back again for you, of course.)

One way to do it would be to use the Solid Code Theme Editor, which allows you to edit any file in the theme. I just tried it and it seems to work well.

But as I say, there’s a downside in your case that you might have to contact NS and ask them to rename your Customizr folder if it goes wrong.

With commenting out and using the correct logo image size I can see the logo on EI9 now. It took a little while for the home page to recognized it, but after refreshing a few times it was there. I do not get an internal error. However, the logo is still bit mapped. It looks perfect in Chrome. I left the modified file in my Customizer folder for now. Should I take it out?

The other difference between EI9 and Chrome is the circles in the feature pages are squares in EI9 and circles (how I have it set and the default) in Chrome. I don’t really care about this, but it may be another point of frustration for some people. A lot of old computers and less techie users still use EI.

On another note, I could see the logo in EI in both websites you listed above. I love your site. I want a few of the chairs (probably cost a fortune). I want to learn how to put the comment box on the slider in the corner, add a rule above the pages and add a text box with a rule above the footer–another day!

I have not encountered the square vs. circle issue.

As a test, I downloaded the PNG from darioalfonsi.com and uploaded it to my site. The logo did not display in IE10.

Thanks mshingledecker, that’s a really useful test. Knowing that my logo will display for you in IE10 when it’s coming from my site, but not when it comes from your site tells me that there’s something about some people’s WP/site setup that stops the image being displayed and it’s probably not related to the image itself. Very useful.

Cathy, thanks for your boundless patience on this one ??

First as to your questions:

– Border-radius doesn’t work on IE8. The pictures will be square. This is a limitation of IE8 and there’s no solution. However, on IE9 it should work well. Strange that it doesn’t. However, I have found that in some cases it doesn’t work on old versions of iOS either. It’s just one of those things that we have to live with until people upgrade their browsers.

– Thanks for the compliments on my site ?? For the slider, I use MetaSlider, but most of the slider formatting can also be achieved in Customizr’s slider. Open new threads for each of the things you want to replicate and I’ll help out.

– The chairs are gorgeous aren’t they? My next challenge is adding WooCommerce to the site (I’m entangled in all the bureaucracy / legal requirements for the moment), so you’ll see the prices at some point in the next 6 months ??

Back to the problem at hand:

We seem to have nailed it down to @getimagesize(), because when we take that out of the equation, the logo displays for you on IE9. But when @getimagesize() is in the equation, it doesn’t display.

I suspect that what is happening here is this:
– The original code sets the width and height to nothing
– It then uses @getimagesize() to get the width and height of the image
– Something goes wrong in @getimagesize() (and this something seems to be peculiar to some people’s setup, not the image).
– @getimagesize() then returns some values that upset IE. In particular, IE is fussy if it gets 0px x 0px for the size of the image (whatever the CSS).

Even if we set the sizes to the correct values before it is called, @getimagesize() overwrites the values with problematic ones.

So the question then presents itself: What is @getimagesize() actually returning in your case?

I have one last request to figure out what’s going on here. Could you try this quick test? (If I were a super-programming guru, I would have had you do some fancy debugging, but I’m afraid that my knowledge extends only to rudimentary tools.)

After the line that says:
//gets height and width from image, we check if getimagesize can be used first with the error control operator
could you add a whole new line containing:
var_dump(@getimagesize($logo_src));
This will print a line or two of information at the top of your site that looks something like array(6) { [0]=> int(1477) ... etc

Could you copy and paste it here in backticks?

I can then analyse what makes my case work and your case not work.

Take that new line out of the code immediately after you copied and pasted what it outputs. It’s only a temporary test to see what’s going on and needs to be removed so visitors don’t see that line of info. As to the other changes you made earlier (the specification of the exact size of the logo and the commenting out of the getimagesize function), I would suggest that you leave them there for now. After all, they make the logo display in old versions of IE. Next time you update Customizr, your changes will be overwritten, but I’m hoping this last test will give us a clue that I can then present to nikeo to resolve the issue. (Fingers crossed.)

Thanks again for all your help.

I added the line to the file and get the following message at the top of my site (both in EI and Chrome):
‘bool(false)’

Ah. OK. Well that explains why the logo doesn’t show. In my case, it gives all the height and width info. Specifically for my logo, I get:

array(6) { [0]=> int(880) [1]=> int(80) [2]=> int(3) [3]=> string(23) "width="880" height="80"" ["bits"]=> int(8) ["mime"]=> string(9) "image/png" }

I’ve come to the end of my abilities to figure out what’s going on here. I’ll send nikeo an email asking him to look at this thread (this may take a week or more).

For anyone who’s just arrived at this thread, the workaround is to change the core Customizr code so that you set the width and height manually and comment out the @getimagesize function. That is, with something like this:

$width  = '1477';
$height = '472';
//gets height and width from image, we check if getimagesize can be used first with the error control operator
// if ( @getimagesize($logo_src) ) {
// 	list( $width, $height ) = getimagesize($logo_src);
// }

on lines 138-143 of /customizr/inc/parts/class-header-header_main.php.

Thanks for all your help Cathy!

I have a better workaround.

In a child-theme’s functions.php add the following:

// Workaround for those affected by the IE logo non-display bug
add_filter( 'tc_logo_img_display', 'replace_erroneous_width_and_height');
function replace_erroneous_width_and_height($html) {

		$width_of_logo_in_px = '1477'; // <<<<<<<<<<<< CHANGE TO YOUR LOGO'S WIDTH

		$height_of_logo_in_px = '472'; // <<<<<<<<<<< CHANGE TO YOUR LOGO'S HEIGHT

		return str_replace('width="" height=""', 'width="'.$width_of_logo_in_px.'" height="'.$height_of_logo_in_px.'"', $html);
}

(changing the width and height parameters to your logo size).

You will need a child theme (get one here) and will be able to edit your functions.php from the WordPress dashboard. If you make any mistakes (getting single-quotes and semi-colons in the right place is important), then you will need FTP to correct them. Alternatively (e.g. absent FTP) you will need to ask your host to delete/rename your child theme.

See How to customize Customizr for more details on how to do this.

mshingledecker: you should be able to do this without FTP (though it’s really ideal not having FTP as a backup strategy).