First off…I am not knowledgeable enough to help you…but…
When I visited your site on IE11, I did not see the issue you mentioned…
I see it. Can you try:
.thumb-wrapper {width:270px;}
Not tested to see any side-effects that might cause.
@rdellconsulting
Thanks, your fix works as long as browser-magnification is 100% but the issue returns (possibly more visible than before) at other magnifications.
I don’t don’t if the intended target group of the site (non-technical people around 40+) but I sure use it alot.
Any ideas on what causes the issue?
I tried playing around with different size/aspect-ratio of the images with no effect.
Also found another odd effect; On IE v.10, the featured images loose their link-state. link curser becomes arrow curser and the image becomes unclickable.
@media all and (min-width: 980px) {
.ie .thumb-wrapper img {
width: 270px !important;
height: auto !important;
}
}
should fix it.
@ Acub
Is that supposed to be a fix for the clickability or the artefacts?
And is it be used in conjunction with the fix from rdellconsulting?
I am not near a machine now with IE 10 so I can’t check the link issue, but it seems to do nothing in terms of the artefact.
I don’t see any artefact in IE11, on W7 Ultimate, fully updated. I thought you’re referring to the fact that the image margins are uncovered upon hover and it looks cut. But I don’t see any artefact in IE11.
And yes, you could use it with rdell’s solution, in the sense that you could place his code inside the media query from mine, for disabling it on screens narrower than 980px.
For the IE10 links problem, here‘s a snippet.
@acub, I think you’re right ion assuming that I am “referring to the fact that the image margins are uncovered upon hover and it looks cut”. The effect is that the most right margin of the image “sticks out” by a few pixels creating what I referred to as a vertical artefact. Without any of the fixes, this happens all the time in IE and WITH the fix, it still happens when I am above or below 100% magnification.
Perhaps I don’t fully understand the combination if the 3 different fixes you guys linked above.
“.thumb-wrapper {width:270px;}” – when placed in custom CSS fixes the issue for 100% magnification.
@media all and (min-width: 980px) {
.ie .thumb-wrapper img {
width: 270px !important;
height: auto !important;
}
}
I don’t see the effect of this one in CSS at all. If I place it in php, it breaks the entire site.
The snippet you linked doesn’t seem to affect the issue of margin but I gather from the comment that it is aimed at fixing the “link” issue in IE 10 right?
I appologize for my nuubish questions, I still didn’t learn how to distinguish between the code aimed at Php and the one for custom CSS..
It is CSS code.
When I loaded your website yesterday without the code I posted, the images were smaller than 270 x 250 under the .round-divs. So I could see their straight margins upon zoom. After I added this code, the images were rounded in IE11, like in any other browser.
I now see them looking and working as they should, even when I zoom in or out. From what you say I understand IE11 renderes differently on different systems/devices. That says a lot.
Again, from here, it looks 100% OK now, in all browsers.
@ Acub
2 of the images should be 270×250
the 3. one I resized to 250×250 to see if that would make a difference 🙂
Glad to hear that it looks ok after I implemented your fixes. Thanks for the help!
@acub, did yuo try zooming in IE? (CTRL+ +/-)
When I do that, it still shows the edge
Yes, I tried zooming both in and out in IE and it’s all sound.
FYI, i’m using v 11.0.9600.17126, Update Version: 11.0.9(KB29257689), on Windows 7 Ultimate.
If you have a lower version, maybe you should try updating. As already mentioned, it’s pixel perfect.
The only problem is that you removed my CSS code and I can, once more, see the lower picture cut at the bottom when the hover is in its max state. The imgs are all 236 x 219px (when viewed full screen on a 1440 x 900 wide monitor, with text magnification reset to 0), except for the middle one that is 236 x 236px.
By the way, do you happen to have some custom system settings regarding font smoothing, readability or anything symilar on your system? As in operating system properties… Those might be the root of this, as normally they should affect IE, since they share the same manufacturer.
Also, afaik IE might have some readability settings which I think I turned off. Check those too.
Thanks for looking into this.
I just bought and installed the “unlimited featured pages” extension and that seems to have had an effect on the problem as well. I re-inserted the CSS from Acub, but regardless of that, both the client and myself still sees artefacts and they appear slightly differently after the extension.. Should I start a new thread for this seeing as my setup has changed and since this thread is [solved]?
Also, I might have tweaked many things in my system but the client hasn’t. Also, it would be nice if “we” could find a more general fix so we don’t have to fear how it looks on different systems (though I know that this might be an unavoidable issue in IE)
(I don’t even dare to think about how the first simple pages I designed in Dw 12 years ago handles such situations 🙂
Start a new post, refer to this one, here. You’ll get @nikeo’s attention.
@ rdellconsulting – thanks, will do that tomorrow 🙂
Will deal with the problem specifically in relation to the awesome plugin Featured pages unlimited in this thread
