EasyBlog image dimensions in IE9 and lower
By Ewoud on Thursday, 06 February 2014
Posted in General Issues
Replies 9
Likes 0
Views 783
Votes 0
Hi there,

The EasyBlog images in the stream are not showing correctly when viewing with IE9 and lower. They are way to big and even overlap the module positions. See attachment.

I have added site details below.

Regards,
Ewoud
Yeah, turns out the inherit idea wasn't a good idea. Thought it was worth a shot considering that we can only input three value types for the width (one of them obviously is the problem). I didn't want to put in an absolute value because it would mess with the other images.

The good news is that I figured out a much smarter selector for the images. The images use a 160px width which means that we can specify that as the width. So remove the CSS code I mentioned before (it creates an issue in FireFox) and try this one:

#es-wrap .es-stream-list .type-blog .blog-description img {width: 160px !important;}


I have confidence in this snippet of code.

Keep in mind that in the future if you change the size of the images of your blog, you will have to change the CSS width code above to that new value.
Josh Lewis
·
Thursday, 06 February 2014 06:10
·
0 Likes
·
0 Votes
·
0 Comments
·
Ewoud, do you mind providing a link to your site? This way we could see the issue as it is on the site with IE9.
Josh Lewis
·
Thursday, 06 February 2014 04:56
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Josh,

Sorry for not adding the url to the public but only to the Stackideas support. I am usually doing this because the site is not live yet. But any help is appreciated so the url is http://www.gtaplanet.nl/social-club.

Regards,
Ewoud
Ewoud
·
Thursday, 06 February 2014 05:12
·
0 Likes
·
0 Votes
·
0 Comments
·
Not sure if this will fix it, but it's worth a shot. Add this to your main template (in any of the CSS files):

Edit: This code doesn't work, use the code that is further down this discussion.

div#es-wrap img, img {width: inherit !important;}


You will need to clear your browsers cache or the CDN will need to register a fresh copy of your template css file. The problem is that IE is some how using the auto value from the width property to stretch the image.
Josh Lewis
·
Thursday, 06 February 2014 05:37
·
0 Likes
·
0 Votes
·
0 Comments
·
No luck unfortunately. I have added your code to the custom.css file of the template, cleared Joomla cache. CDN cache and browser cache but the images still look the same.
Ewoud
·
Thursday, 06 February 2014 05:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Your confidence is absolutely right . It solved the problem.

Thanks a lot for the great help.

Regards,
Ewoud
Ewoud
·
Thursday, 06 February 2014 06:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Awesome! Glad to hear. I'm not a member of the support staff, but am practicing for when I have to support customers with issues. Plus I figure that the Stacked team and other folks would appreciate it.
Josh Lewis
·
Thursday, 06 February 2014 06:28
·
0 Likes
·
0 Votes
·
0 Comments
·
That's why this community rocks! Great staff, great members
Ewoud
·
Thursday, 06 February 2014 06:32
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi,

We very much deeply appreciate this! Thanks!
Jason Rey
·
Thursday, 06 February 2014 11:34
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post