Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 29, 2014 at 12:43 am #23154
    scg
    Member

    Hi,

    I’ve uploaded a header image, 1600 by 337 px.

    It looks great in Firefox. Looks great in Chrome.

    In Internet Explorer, it’s stretched too high.

    How can I make IE behave?

    Site is tomwilliamsmachine.com/n/

    March 29, 2014 at 6:15 am #23214
    scg
    Member

    Update: According to http://netrenderer.com/index.php, it looks like it’s only a problem in IE8.

    March 29, 2014 at 7:25 am #23229
    scg
    Member

    Okay, I think I’ve pretty well fixed the problem by making a child theme, copying header.php, and adding the following code before the </header> tag:

    <!–[if IE 8]>
    <script>
    var imgs, i, w;
    var imgs = document.getElementsByTagName( ‘img’ );
    for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( ‘width’ );
    if ( 615 < w ) {
    imgs[i].removeAttribute( ‘width’ );
    imgs[i].removeAttribute( ‘height’ );
    }
    }
    </script>
    <![endif]–>

    There’s still a problem, though. In IE8, it renders the page too wide. The problem does not seem to happen in IE9/10 etc.

    March 29, 2014 at 11:36 pm #23362
    Sakin
    Keymaster

    @scg: Sorry our theme supports only from IE9 onwards. IE8 is very old to give support. If you are searching for IE8 issues then see this http://catchthemes.com/support-forum/topic/site-not-working-in-internet-explorer-8/

    March 29, 2014 at 11:46 pm #23371
    scg
    Member

    Wow. As of last month, Internet Explorer 8 is still being used by 22% of desktop visitors — nearly one FOURTH of visitors who are using an actual computer — and you don’t support it?

    I’m very surprised.

    At least I found a fix for the major issue, which was the stretching of the header image. The page being too wide, I can live with.

    March 29, 2014 at 11:51 pm #23377
    Sakin
    Keymaster

    @scg: Yes but WordPress also have remove support for IE8 and we should discourage very old browser. But yes if you like to make it work on IE8 then there are plugin like https://wordpress.org/plugins/wp-ie-enhancer-and-modernizer/ and other in http://wordpress.org/plugins/ which help you to support IE8.

    March 30, 2014 at 4:05 am #23417
    scg
    Member

    Thanks for the reference to that plugin. However, the site works better without it.

    The fix I posted above is good, though. If you were to incorporate it into your header.php, it would help others using your theme to be able to present a better-looking site to the large number of visitors who use IE8.

    As for discouraging the use of IE8, should I put up a page that says to visitors, “I don’t like your choice of browser, so if this site looks crappy, it’s not my fault?”

    20 to 30% of computer users still use Windows XP even given its upcoming end of support life. And on Windows XP, version 8 is the highest version of IE that you can even get. These people’s computers do not support IE 9. And they are a very significant percentage of users.

    What do you say to these people? “Sorry, we don’t serve you. Either go buy a new computer, or go to some other web site?” My clients won’t be very impressed with my saying that to a large percentage of their customers.

    So I don’t see it as being my job to tell visitors what OS or browser I want them to use. I might as well tell them, “Sorry, we don’t cater to smartphones.”

    My job is to cater to whatever they’re using. And for 22% of people who have computers, that’s still Internet Explorer 8.

    March 30, 2014 at 11:12 am #23459
    Sakin
    Keymaster

    @scg: Sorry for that and for the best option, you can add the code in “Appearance => Theme Options => Webmaster Tools => Header and Footer Codes => Code to display on Header” or you need to build child theme and add in your child theme header.php. Editing the core theme files is not recommended as it will be reverted back when you update the theme.

    Yes, I understand your view point as a developer. I just try to add in the following css and it fixed it fine. No need JS. Can you try adding in the following css in “Appearance => Theme Options => Custom CSS” box. 

    #header-image {
    display: block;
    overflow: hidden;
}
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Header image stretches too high in Internet Explorer’ is closed to new replies.