Tagged: , , , , , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 19, 2013 at 9:30 pm #163760
    tmunz

    Hey guys,

    I’ve been trying to launch this website since I bought the theme months ago, but have not been able to due to my large audience of IE8 users and the numerous issues the theme has in the browser. I had been working off version 1.51 of the theme and the previous version of wordpress, so I was hoping that updating to the newest theme files and newest wordpress would fix the issues, but it did not, and actually added a new menu issue.

    Here’s my website URL: http://goo.gl/jGUCw

    1. Menu broken in IE8, items dropping to the next line:
    http://s22.postimg.org/p7d71dz1d/Screen_Shot_2013_09_19_at_3_18_09_PM.png

    2. Responsiveness now broken in IE8 (It worked in version 1.51 of the theme which I was previously using), white header background disappears at certain size:
    http://s22.postimg.org/8i6p8cw4h/Screen_Shot_2013_09_19_at_3_17_51_PM.png

    3. Entypo font broken in IE8, most icons do not show, main issue being the ‘Search’ icon (I removed all the others I had on the site due to this):
    http://s22.postimg.org/p7d71dz1d/Screen_Shot_2013_09_19_at_3_18_09_PM.png

    4. Stretched ‘You might also like’ images:
    http://s22.postimg.org/t2gl3yi75/Screen_Shot_2013_09_19_at_3_18_34_PM.png

    5. ‘Recent Posts’ widget images not filling image container correctly:
    http://s22.postimg.org/t2gl3yi75/Screen_Shot_2013_09_19_at_3_18_34_PM.png

    Please advise!

    Thanks,
    Tom

    September 20, 2013 at 12:35 am #163810
    Devin

    Hi Tom,

    First, IE8 can not ever have responsive support without the aid of something like responsive.js . See: http://wordpress.org/plugins/respondjs/

    1. This is actually new popping up just in 2.2 but can be fixed with:

    .main_menu ul:first-child > li > a {
width: 100%;
}

    3. You can try re-uploading your theme files with no plugins installed manually over FTP but the icon font does have IE8 support and viewing your site right now on IE8 natively I’m not having any issues with it.

    4. This should fix the related entries issue:

    
.related_entries_container .attachment-square.wp-post-image {
height: 100%;
width: 100%;
}

    5. The news thumb issue is odd. IE8 is not supposed to support min-width or min-height but it *is* on your site. I have no idea why or how unless you have a modernizer script running or something like that to give IE8 more css/html support than it should.

    But this may fix it:

    .image_size_widget .news-thumb {
height: 36px;
width: auto;
}

    Ultimately using something like responsive.js and modernizer may be your best route to go if you are going to have a known IE8 audience as once IE11 is officially out IE8 will no longer be supported.

    Regards,
    Devin

    September 20, 2013 at 2:47 pm #164076
    tmunz

    Hey Devin,

    Thanks for the reply. I am currently using respond.js to add responsiveness to the site in IE8, which worked perfectly with the past versions of Enfold, but is now causing the breaking seen in the screenshot.

    1. I tried this both with and without respond.js active, but unfortunately it did not fix the issue, the menu remained the same.

    3. I tried this and unfortunately the problem remains. I’ve also seen several other people on the forum with the same issue in IE8 where the font renders as rectangles. Since this is the only instance on the site where I’m using the Entypo font, could you show me how to simply switch the magnifying glass icon out with an image of my choosing (so I can upload an image of a magnifying glass) or another work around?

    4. This worked, thanks!

    5. I do have respond.js installed, which may explain that. Unfortunately I tried the code you supplied both with and without respond.js enabled and cleared cache, but it doesn’t work either way.

    6. I’ve now discovered an issue that has reared its ugly head again where the menu is overlaying the logo at certain sizes in every browser:
    http://s13.postimg.org/huh20ejhj/Screen_Shot_2013_09_20_at_8_43_41_AM.png

    Thanks,
    Tom

    September 20, 2013 at 5:40 pm #164123
    tmunz

    Actually, after re-examining the code for issue #1, I saw I had accidentally inserted an extra character. After correcting that, the menu is no longer knocking words down to the next line, so we can cross that one off the list!

    September 24, 2013 at 2:50 am #165394
    Devin

    For #3, I would suggest trying to re-install the theme files again and if you have any caching plugins installed flush their cache completely. I’m not actually getting any issues with it on my end for the font file.

    The menu’s switch width can be adjusted by following the guide here: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    Since you are using the responsive script you should also add in modernzr: http://wordpress.org/plugins/modernizr/ This should help with the other issues.

    September 30, 2013 at 3:15 pm #168157
    tmunz

    Hey Devin,

    2. The white background is still disappearing from behind the menu when sized down to the point of the mobile menu kicking in.

    3. Unfortunately I’ve tried re-installing the theme files a couple of times and the problem with the fonts not showing still remains. I am not using any caching plug-ins.

    5. I tried installing the modernizr plugin, but it did not fix the issue with the Recent Post images (I did not notice any changes from installing the plug-in).

    6. I followed the instructions for changing the menus responsive function, which worked for the most part. Although now I’m getting a weird 10-15px zone between where the menu changes from regular to mobile where the mobile menu shows and is mis-aligned to the top right. I’ve taken a screenshot of the issue, seen below. *Note this is not happening in IE8, only in modern browsers like Firefox and Chrome*
    http://s7.postimg.org/7fnke3yez/Screen_Shot_2013_09_30_at_9_13_50_AM.png

    Thanks,
    Tom

    October 1, 2013 at 4:19 pm #168815
    Devin

    2) I’m not getting the white background issue on my end but I can check with another machine later.

    3) Clear out your local browser cache for the icon issue. That has been the solution for 99% of people at this point with icons not displaying.

    5) Have you changed any of the theme’s image sizes that are being generated? Either with a plugin or modifying functions?

    6) All I can suggest is to modify both values and use this as a reference for break points of devices: http://screensiz.es/

    October 4, 2013 at 3:33 pm #170448
    tmunz

    Hey Devin,

    Some things have changed after updating to 2.3:

    2) This issue is still occurring, although now the menu also disappears completely instead of switching to the mobile menu at certain sizes.
    http://s23.postimg.org/g76as3dbv/Screen_Shot_2013_10_04_at_9_27_12_AM.png

    3) The search icon now only displays correctly after mousing over it.. Until that point it remains a rectangle. I’ve cleared my cache several times.

    5) The only plug-in I’m using that would affect image size would be respond.js. Other than that I’m modifying a few specific image sizes via the custom CSS for IE8 fixes as directed by the support team.

    Thanks,
    Tom

    • This reply was modified 11 years, 2 months ago by tmunz.
    October 7, 2013 at 2:54 pm #171635
    tmunz

    Another new issue I’ve discovered in IE8 is when the website is scaled down, it starts to squish the blog images horizontally while retaining the height, causing the blog images to look skewed. Here’s a screenshot: http://i.imgur.com/M0eoWsA.png

    October 11, 2013 at 3:38 pm #174206
    Devin

    At this point since a good bit of time has passed I would recommend just removing or deactivating the extra scripts to bring IE up to modern visuals (modernizr and responsive.js etc), update to 2.3.2 and we can go from there.

    The theme has had some menu updates and some other big updates for the page structure and at least getting to a point where we can see if its css or what and work on the same version should help.

    Typically there aren’t so many issues so trying to clean up the hacks up to this point is the best route to getting things clean I can see.

    October 11, 2013 at 3:42 pm #174210
    tmunz

    Hey Devin,

    I’ve gone ahead and deactivated respond.js and the theme is updated to 2.3.2.

    After removing respond.js, obviously the website is no longer responsive in IE, so the squished blog image issue goes away. But naturally I would prefer it to remain responsive, so hopefully there’s a way to fix that aspect of the plug-in’s functionality.

    The other remaining issues are:

    – Menu disappears at certain smaller sizes
    – Search icon renders as a square until moused-over (I would be happy with simply switching out the font search icon with an image if you can show me how)
    – Recent Post images don’t fill their container boxes correctly

    Thanks for the help!
    Tom

    • This reply was modified 11 years, 2 months ago by tmunz.
    October 14, 2013 at 3:21 pm #175087
    Devin

    Looking much better now. Checking with IE8 now I’m only getting the recent posts thumbnail issue which can be fixed by using:

    .image_size_widget .news-thumb img {
width: 36px;
height: 36px;
}

    The icon is showing correctly and I’m not actually sure what you mean by menu not showing at certain sizes since again, IE8 can’t render media queries so the menu never gets css to tell it to hide.

    Is it happening on native IE8 or an emulator?

    October 17, 2013 at 7:06 pm #177129
    tmunz

    Hey Devin,

    The thumbnails are now fixed, thanks for that!

    As for the other two issues, I’m testing on Mac Parallels running Win 7 and IE8.

    Here’s a screenshot of the menu disappearing (note that the slider is transitioning in the screenshot, not broken): http://i.imgur.com/hQnh9Zp.png

    Thanks,
    Tom

    October 18, 2013 at 3:29 am #177261
    Ismael

    Hello!

    I tested the site on IE8 and the menu shows fine.

    Can you please remove browser cache then reload the page?

    Regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Many IE8 Issues’ is closed to new replies.