Detail view: Half images in Firefox 4.0.1

[offi]

Hi there

I just launched my new site, www.offi.is and it is mainly based on Phoca gallery. I chose Slimbox as the detail view mode. Everything works fine exept when viewed in Firefox 4.0.1. If I browse the detail view by clicking "Next" or "Previous" it tends to cut the images in half, display only half the image, unless I have the mouse over. If I browse the detail view by using the arrows on the keyboard, everything is normal.

Is this a configuration problem or ...? All help would be highly appreciated!

I did search through the forum for this problem, but came out empty.

Best regards
Offi

[Jan]

Hi, did you test it with standard template?
https://www.phoca.cz/documents/50-phoca/ ... al-advices (3)

Jan

[pitu]

Hi,
problem is on your /templates/beez_20/css/personal.css on row 43

Code: Select all

a:hover, a:active, a:focus {
    background: none repeat scroll 0 0 #CCCCCC;
    color: #FCFCFC;
}

- a:focus overide focus for #lbPrevLink and #lbNextLink (there are not defined) in components/com_phocagallery/assets/js/slimbox/css/slimbox.css


Insert next code to file components/com_phocagallery/assets/js/slimbox/css/slimbox.css or to file /templates/beez_20/css/personal.css

Code: Select all

#lbPrevLink:focus {
    background: url("prevlabel.gif") no-repeat scroll 0 15% transparent;
}
#lbNextLink:focus {
    background: url("nextlabel.gif") no-repeat scroll 100% 15% transparent;
}

[offi]

Thanks a million, guys. Adding the code into the slimbox.css file did the trick. But now the "Next" flip refuses to disappear however. Some css conflict?

[pitu]

Hi,
try the next solution (sorry for previous solution - developed and tested only on Firefox Firebug - and my english) :
Code posted above

Code: Select all

#lbPrevLink:focus {
    background: url("prevlabel.gif") no-repeat scroll 0 15% transparent;
}
#lbNextLink:focus {
    background: url("nextlabel.gif") no-repeat scroll 100% 15% transparent;
}

replace with

Code: Select all

#lbPrevLink:focus {
    background: none transparent;
}
#lbNextLink:focus {
    background: none transparent;
}

and code in file com_phocagallery/assets/js/slimbox/css/slimbox.css

Code: Select all

#lbPrevLink:hover {
    background: url("prevlabel.gif") no-repeat scroll 0 15% transparent;
}
#lbNextLink:hover {
    background: url("nextlabel.gif") no-repeat scroll 100% 15% transparent;
}

replace with

Code: Select all

#lbPrevLink:hover {
    background: url("prevlabel.gif") no-repeat scroll 0 15% transparent !important;
}
#lbNextLink:hover {
    background: url("nextlabel.gif") no-repeat scroll 100% 15% transparent !important;
}

...nice photos...