Border Radius Not Handled Correctly

RogersDA

I use several browser-specific border settings (-moz-border-radius and -webkit-border-xxx-radius) to create various styled borders on my galleries. The CSS on my site will show all the border settings.

In Internet Explorer the image borders are not changed (curved) - these CSS settings do not work with IE. The -moz-border-radius and -webkit-border-xxx-radius settings affect Firefox, Safari, and Chrome (though there may be others).

In the public galleries on my site; e.g., fauna, the image borders are fine.

On other mostly hidden galleries I noticed that the border curves were present, but the thumbnails looked as though they were "sitting on" the border. Here is an example where they are not quite right.

I started trouble-shooting this and found that, by applying the gallery settings from one of the main site galleries; e.g., the Fauna gallery listed above, to one of the problem galleries, the thumbnails were corrected. So I went setting-by-setting to determine which gallery setting change(s) forced the thumbnails to fix.

It turns out to be Right-Click Protection. If Protection is set to no then the thumbnails are on top of the borders as altered by the -moz and -webkit settings. As soon as I change the Protection to yes to borders/thumbnails are fine. Here is the same gallery with the protection set to yes.

This issue also affect gallery thumbnails and sub-category thumbnails, too. These can't be corrected since you can't turn-on right click protection for sub-category and gallery views.

jfriend

This is probably because when you turn on right-click protection, the thumbnail images become background images, not regular <img> tags. The border radius apparently only displays above an image when you apply it to an object that is on top of the image (containing the image), not when you apply it to the image itself. Thus, it works when the image is a background behind the tag you are apply the border to, but not when the border is applied to the tag that is the image itself.

You can see some discussion of this issue here. Apparently, it doesn't work when applied directly to the image. It has to be applied to some sort of container that is above the image. I don't know if there's a way to move the radius up to a containing div or whether you'd have to design your own category pages or write a custom script that would create the right structure in the current category pages

RogersDA

jfriend wrote:

This is probably because when you turn on right-click protection, the thumbnail ijages become background images, not regular <img> tags. The border raidus apparently only displays above an image when you apply it to an object that is on top of the image (containing the image), not when you apply it to the image itself. Thus, it works when the image is a background behind the tag you are apply the border to, but not when the border is applied to the tag that is the image itself.

You can see some discussion of this issue here. Apparently, it doesn't work when applied directly to the image. It has to be applied to some sort of container that is above the image. I don't know if there's a way to move the radius up to a containing div or whether you'd have to design your own category pages or write a custom script that would create the right structure in the current category pages.

Thanks - that more or less confirms what I was thinking - but in a way that I couldn't have said myself. It may well be that I will not worry too much about this for hidden galleries - or just turn-off the radius feature for them separately if needed. I am in no way able to develop the script to attempt to handle this....playing with the Divs to I can try - but I wouldn't hold out too much hope for that...