Posted 10 months ago #
Hi,
I'm using the Twenty Eleven theme and thanks to you guys have been tweaking it to look perfect. The problem is that when I use a full width featured post image on the front page (the one which covers the entire page width) it doesn't show up on IE8 instead leaving a blank space.
Is this a known issue?
Have a link?
Posted 10 months ago #
http://www.realepicurean.com/ - featured post #4 will show the issue.
Does changing the max-width properties to width (or including a width property in addition to max-width) help... specifically in the following styles:
section.large.feature-image IMG
.featured-posts section.large.featured-postsThat does something on my end--the text/link shows up, and the image will appear but only when I hover over it. (I don't trust my version of IE8 with developer tools, so I don't know if that's a fluke on my end or not!)
Posted 10 months ago #
I'm also having this problem in IE 8... they DO show up when using "compatibility mode", but the entire featured posts section (this of course being in the showcase template) is misplaced, to the left...
site: http://reisentilbake.dinamo.me
Using a child theme... but haven't tampered with the showcase template. and i've tried using a fresh install of twenty eleven mother theme and deactivating all plugins.
Posted 9 months ago #
Hi,
I found a solution here: http://core.trac.wordpress.org/attachment/ticket/18024/diff.txt
That seems to work. My problem is that I'm "auto-sliding" the featured posts, and when that happens, it doesn't display the image the next time around until mouse-over.
If anyone has any suggestions for that (example http://www.realepicurean.com) then greatly appreciated!
Posted 9 months ago #
OK a little more information, I have disabled the auto-slide for IE7 / IE8 and I can confirm that the CSS fixes DON'T work.
Basically the image is shown, but if you click forward to other featured posts with a full size featured image, they don't show until mouse-over.
So still a massive IE7 / IE8 bug :-(
Posted 9 months ago #
I'm having same problem and have been hunting for solution. Found this WP ticket (http://core.trac.wordpress.org/ticket/18024) that seems to say the bug was fixed -- I'm pretty green to WP tickets, but it appears that the ticket attachment "diff.txt" will fix the problem with CSS.
I'm not sure what to do to try it out, though. Do I just add that code to the bottom of my (child theme, natch) style.css?
Anyone else try this yet?
Thanks, Lisa
(I have also run into some other notes that point to javascript issues with IE, but I've not checked that out thoroughly. When I found this patch, I figured it might be best to try first.)
Posted 9 months ago #
Sorry about double-posting the link to diff.txt. Missed that realepicurean had already posted & tested same.
Following those same footsteps and can confirm I'm still having same problems as realepicurean describes.
Posted 8 months ago #
Seems no answer to this bug?
Posted 8 months ago #
I haven't found a good answer yet, but I'm still looking into it when I can.
(& yes, everyone -- to preface, I'm using a child theme like a good little strangeshe ;)
I applied the CSS changes outlined in ticket 18024 linked in this topic, above. That fixed the image sizing and positioning problem in IE when the featured image was the large 1000 x 288 size (but see new problem at end of this post). Prior to applying the changes from the ticket, my images (when they appeared at all) were extending beyond the left margin of the featured post 'box'.
Now that I've applied those CSS mods, the images are positioned correctly but still display inconsistently in IE. Occasionally, the first one or two slides will display as expected on initial page load, but after that, the 'only-on-mouseover' issue asserts itself. This is true with and without the auto-slide mod, which tells me that the problem is not in the js from Johan van der Wijk and archondigital in this topic: http://wordpress.org/support/topic/theme-twenty-eleven-auto-slide?replies=22#post-2356367.
I suspect the problem is in the original JS that came with Twenty Eleven. And I further suspect it has something to do with IE being touchy about the "visible" setting. But I'm a total newbie when it comes to JS and jQuery, so I can't be sure.
The IE8 problem can be viewed on my test site without the auto-slide, here: http://www.wikedtribe.com/
And on my regular site with the auto-slide, here: http://www.tadwilliams.com/
Both sites display properly in Firefox, Safari, Opera, and Chrome. I still only have XP, so don't have IE9 to test with.
Since the auto-slide part does not seem to make any real difference with this problem, I have not applied realepicurean's code to the header or js file (from same topic linked above) to select auto-slide by browser.
NOW, though, I have a new problem that I've not had time to chase down -- and this problem shows up in all browsers. After applying the CSS changes from ticket 18024, the large image positions were fixed, but the small images broke. You can see the problem on Featured Post 'slides' 3 and 5 on the tadwilliams.com site, and on slide 2 on the wikedtribe.com site.
The small images that go with those featured posts appear cropped -- they are actually 450x300 and 434x230 and can be seen in full if you View Image. Something in the CSS is pushing the images into the right margin, but the overflow is hidden so it looks like they're being cropped. Since it's happening in all browsers, and only began after applying the CSS changes from ticket 18024, I know it has to be a CSS problem. *sigh*
So, yeah. Still have IE8 issues with the Featured Post area (whether or not it auto-slides), and now also have new issue in all browsers with the smaller featured post images.
Haven't given up yet, though. I don't want to give up on twenty-eleven, just want it to work properly.
Thank you for reading this far and for any help you can give.
Posted 8 months ago #
PS: Incidentally, as you can see from my site links above, the problem with the Featured Post images that don't display in IE until mouseover apply only to the large images -- ie the 1000 x 288 size. The featured posts which use small images will display when expected without needing to mouseover. (But they still have the margin problem.)
So, something to do with the large image size and/or the jquery.
Posted 8 months ago #
On a side-note, Strangeshe, I like your front page showing excerpts. How did you do that?
Posted 8 months ago #
Thank you. I've fiddled with it quite a bit, and only recently have it working pretty well. There are 3 parts:
1. Twenty eleven already has theme support for post thumbnails, so I didn't need to enable that. But I did register an image size in functions.php (child theme):
add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
// Sets the dimensions and hard crops thumbnails displayed in excerpts
add_image_size('excerpt-thumb', 140, 140, true);
}(in part from this article at wpbeginner)
2. In content.php (a child theme copy), between the header and footer section, I modified the loop to show the excerpt and the excerpt-thumb on all pages except single posts:
<?php if ( ! is_single() ) : // Display excerpts for all pages except single posts ?>
<div class="entry-summary">
<div class="excerpt-thumb">
<?php the_post_thumbnail( 'excerpt-thumb', 'class=alignleft'); ?></div>
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>(Most of that came from various Twenty Eleven topics here in the forum, but I've lost track of which ones specifically)
3. And the final step was to use the Simple Image Sizes plugin (ver 2.1) as mentioned in that wpbeginner article. I found that plugin worked better for me than the Regenerate Thumbnails plugin. After installing and activating the plugin, adjust settings in the Settings > Media section of the dashboard. The plugin finds all the image sizes that are registered for the theme. In mine, I have these along with these settings:
Thumbnail size: 140 x 140 check Crop
Medium size: 300 x 300
Large size: 1024 x 1024
Size excerpt-thumb: 140 x 140 check Crop check Show in Post Insertion
Size post-thumbnail: 1000 x 288 check Crop check Show in Post Insertion
Size large-feature: 1000 x 288 check Crop check Show in Post Insertion
Size small-feature: 500 x 300 check Crop check Show in Post InsertionMost of those already exist with Twenty Eleven; the new one I registered in functions.php (excerpt-thumb) was added to the list. After adjusting the settings, I clicked "update" on each, then ran Ran "regenerate" on thumbnail, medium, large, excerpt-thumb, and small-feature for posts and pages. This updated all the images I already had loaded in my theme. Any new post images will be handled according to the settings.
I hope this helps!
Posted 8 months ago #
(Naturally, immediately after posting the version for Simple Image Sizes, I discover an update today. Heh. Now it's version 2.2. But you know to use the most current one ;)
Posted 6 months ago #
I had the same issue and the following code fixes showcase issues with ie7 and ie8.
I used the same ticket that you posted but I just put #ie8 before certain classes and it worked for me. I'm no expert but it works so I'm happy!
[CSS moderated as per the Forum Rules. Please just post a link to your site.]
Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.
Posted 5 months ago #
The problem is not with add code to autoslide. The problem is with the method. In original code, css fade is used. IE8 and IE7 have problem with css fade. So after try many solutions, I decided to stop with fade in IE, in other browsers continues. I change the code to:
(function($) {
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion>=8)
$('.featured-posts section.featured-post').css({
opacity: 1,
visibility: 'hidden'
}); }
else
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider a').removeClass('active')
$(this).addClass('active');
e.preventDefault();
});
});
var current=1;If browser is IE I put the start opacity to 1 like the second. So It doesn´t have any animation, only show and hide the image. To resolve the problem with black borders (with PNG and Gif too) I used it
function fixPNGs(){
if(jQuery.browser.msie && jQuery.browser.version < 9){
var i;
//alert(document.images.length);
for(i in document.images){
if(document.images[i].src){
var imgSrc = document.images[i].src;
if(imgSrc.substr(imgSrc.length-4) === '.png' || imgSrc.substr(imgSrc.length-4) === '.PNG'){
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
}
}It not the perfect solution, because in the second loop, I don´t know why, the first imagem show with black borders. I use PNG and GIF with background transparent.
Posted 5 months ago #
Looks like this one is fixed - almost - here: http://wordpress.org/support/topic/theme-twenty-eleven-auto-slide?replies=30#post-2493028
Posted 5 months ago #
Almost. I tried it now, image fade perfect but text has problem yet. The second text overlay the first without any fade. This in IE 8. But It is some advance. We are going almost to the point...:)
Posted 4 months ago #
Hi,
Can anybody let me know what to do with file diff.txt from ticket 18024 linked above ? Any help is welcome, as I'm an absoulte beginner with WP. Thanks.
You must log in to post.
