IE problem - grid images

Hi,

in IE, the images in grid are messed up. Actually, they are not centered/streched/skewed, so they are not showing properly. Is there a solution for this or do I have to upload them exactly the right size, and what size would that be?

Thank you, images are in attachment. Greetings.

Hi

Please show me Your site.

Hi,

I sent you via PM because the page is still offline, so I sent you the login data too.

Thank you.

Hi

Looks like problem is that this module is not supporting IE8 since IE8 doesn;t supports an option to stretch background images.

I think it may be extended thanks to this filter:

Code: Select all

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";


Hi,

ok, thank You. Where should I put this code?

Thanks.

Hi

This background option for modules is a feature of joomla not our template, so implementing this into joomla may be problematic and bring some problems during update. I think You need to use a different approach. Please do not use this option, but make image upload with a module class suffix. For example add this module class suffix " photo_1" (space in front is important) and than add this css code to override.css file:

Code: Select all

.box.photo_1 {
background: url('URL_TO_YOUR_IMAGE') repeat center center transparent;
background-size: 100% auto;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.URL_TO_YOUR_IMAGE', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='URL_TO_YOUR_IMAGE', sizingMethod='scale')";
}


this way You will have all methods covered.

Hi, thank You very much.

I'm afraid I did something wrong,

I should put the suffix in the first grid image, right? So I edited module "Grid1 - I" and deleted " gkPhoto" and put " photo_1".

Then I copied the code to override.css, and replaced the url_to_your_image with the url '/images/grid/mind_grid.jpg'

Is that correct?

It did not work, I got this result (in IE and in firefox) - image in attachment.

Where did I go wrong? Thank You.

Hi

I do not see this css code anywhere. Please check if override is enabled in template settings.

Hello,

I checked and it's there. Override is enabled.

You have the admin access, You can take a look inside if You have the time? If You like, I will send You the cpanel login data?

Thank You.

Hi

Ok. I've spend some time on this and finally made this code to work. Here is how it looks like:

Code: Select all

.custom.photo_1 {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-image: url("http://www.YOUR_DOMAIN.hr/images/grid/mind_grid.jpg") !important;
    background-origin: padding-box !important;
    background-position: center center !important;
    background-repeat: repeat !important;
    background-size: auto 100%;
    height: 100%;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.YOUR_DOMAIN.hr/images/grid/mind_grid.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.YOUR_DOMAIN.hr/images/grid/mind_grid.jpg', sizingMethod='scale')";
}


Please check how it works with IE now. Unfortunatelly my computer with Windows hangs when I open IE. Need to reinstall system first

Hello teitbite,

thank You very much for Your effort, You're great!

Unfortunately, it's not working just as it should

I have attached screenshots of firefox and ie. There is a slite difference, in ie the picture is a little "pushed" together, as You can see. But I can work with that, maybe adjust the image size a little or something?

The problem is that now, there is no animation on hover, You can see that in firefox too. Also, there is no link on "MIND" in ie anymore...

I don't know, maybe I should leave it like it is, if You don't have anymore ideas.. Who uses ie anyway, right?

Thank You again very much for Your trouble, it's too bad it's not working...

Hi

Yes, lately I read that even javascript libraries will not support IE8 soon, so this browser will becaome a history on intenet

My other idea is to revert the changes and do as You said use the exact image dimentions as the boxes are prepared for. You need my help in removing the module class suffix and the css code ?

Hello,

I think it's history already, but obviously some are still using it

Ok, that's fine, can You please tell me what are the exact dimensions that are needed? For 1x1 module, I will count it from there..

I don't think so, I changed the photos with the ones that will be there when the page goes online, so I set the suffixes back to " gkPhoto", and I removed the code from override.css. I think that's it?
It looks better now, but i can't get the link on the whole image in IE, just on the word, but I can live with that I attached the printscreens again.

Just the imageshow module looks weird in IE, it moved, maybe when You tell me the dimensions it will be fine. (there is only one image right now)..

i actually have another question, I need to translate the cookie consent module, and would like to completely remove the "Privacy settings" tab, I don't know where to do that? Maybe You can help me here, or should I open a new thread for this?

You have been a huge help, thank You very much for You effort.

Greetings

Hi

You can translate the plugin text in /languages/en-GB/en-GB.tpl_gk_msocial.ini

Code: Select all

TPL_GK_LANG_COOKIE_NOTIFICATIONTITLE="Your experience on this site will be improved by allowing cookies"
TPL_GK_LANG_COOKIE_NOTIFICATIONTITLEIMPLICIT="We use cookies to ensure you get the best experience on our website"