Detail image width wrong in Firefox and IExplorer

[pofagyalu]

I have latest Joomla, latest Phoca Gallery installed. To display images I use Highslide JS (Image only). Full image parameter set to yes. When I click on a thumbnail to zoom it the image is displayed correctly BUT right after that in one milisecond the width of the image gets reduced by approx. 15-20%. When I pass to the next image the problem is the same. What could be the cause of this problem? In Chrome everything works perfectly.

Here is one link to my page: pofagyalu.hu/category/28-korfu

Thanks.

[Jan]

Hi, testing now the site in Firefox, get no such problem

Jan

[pofagyalu]

Hello Jan,

I use for testing Firefox 10.0.3 and IExplorer 8. Could the (old)version be a problem? The same is happening on my android tablet using latest Firefox available.

[Jan]

Hi, really no idea what can be the problem there, didn't get any such problem yet and tested in different browser version

Jan

[pofagyalu]

Hi,

I installed the latest Firefox at home and I checked on different computers, at home , at the office. All of them show the same problem (only exception is Chrome). Could you give it one more, last try?
The width problem can be seen especially with portrait pictures and the width decrease is visible when you advance from one picture to the other
one.

Thank you.
Zoltán

[Jan]

Hi, maybe this is because we user other screens, no idea which size of screen you have, but e.g. highslide JS has a feature to resize the popup to fit the window, maybe this can be the reason, why it gets reduced (but not idea why after some seconds, it should be done immediately) - do you get this behaviour with some standard template?

[pofagyalu]

Hi Jan,
I have tried on different computers in different places all with the same result. I have a HP x23LED monitor in my office with 1920x1080 resolution, at home a Viewsonic VA2010wb with 1680x1050 resolution and Samsung Galaxy 10.1 tablet. On all of them except when using Chrome the detail image display is wrong, the width of the image gets smaller like it would compress just in an instant after displaying the photo. The effect can be well observed when using the Highslide Next button to advance from one image to the other one. Could you be so kind and try again maybe you have some other idea. Thanks. Zoltán
p.s. additional info: when I use standard template such as Beez3 I do not have this problem only when using T3 framework based template.

[Jan]

p.s. additional info: when I use standard template such as Beez3 I do not have this problem only when using T3 framework based template

Hi, in such case, this means only one: there is some conflict between the Highslide and your template - as the template is the last one which can change the output (last loaded css which can overwrite styles loaded previously, the conflict needs to be found in the template )

It somehow affect the previously declared style for Highslide but how really not idea as I don't now templates based on t3

Jan

[pofagyalu]

Hi,

I have just discovered that if I remove from my template.css the following: img {max-width: 100% important !} the problem disappears. We can consider my problem solved, the only thingI don't like: I do not understand how this affects the whole issue and can just hope that it has no other side effect in other parts of my site. Thank you anyway.

Zoltán

[Jan]

Ok

It is really difficult to answer your question. Joomla! is a complex system solution - mostly on one page, you run a lot of parts made by different developers.

So if someone will do something this can affect other parts of the system. I for my self am trying to not stylize parts which don't need to be stylized, so the styling of page will be the same for all other parts - unique.

Templates - CSS - are loaded as last part and can influence all other previously loaded parts - So template can be in conflict with component, module, plugin and content.

Why in template CSS is set: img {max-width: 100% important !} with important tag (which overwrite everything and prevents from being overwritten), this should be a question on template developer, the same what happen when this will be commented or deleted

I really cannot say if this part is somehow important for displaying the images or not (it is really not easy because as developer of template, you need to care about good displaying of the site for different browsers, for different screens, for different versions of browsers, etc )

Jan