Why are you using a UL (unordered list) without LI's (list items) wrapping your anchors?
It would be more standard to use a <div> instead of the ul, or to add <li></li> around your hrefs.
a.s.
I switched the <ul>'s to a div and works now. As you mentioned in another thread that <li>'s were
needed inside the <ul> tags worked but easier to switch it div's.
Thanks
would everyone take a look at my site with rounded corners and see if there is any issues anywhere with other browser and for antoher set of eyes on the page.
would everyone take a look at my site with rounded corners and see if there is any issues anywhere with other browser and for antoher set of eyes on the page.
We talking technical OK? Yes, on my 24inch monitor it looks fine.On your galleries have you centralized the content? At the bottom of the images there are two in the centre. Is there a way to set the view size to large? It looks a bit much when it goes all the way from top to bottom of the screen in the lightbox.
Aesthetically (I'll remove this comment if you want) I think the roundness is too much. Perhaps half the whatever the pixel figure is would do it. Same for the shadow - it's nice, but too much. It distracts from the very nice images, which should be the main interest.
I do like Loki! Try saying that after a few glasses of Napa Valley.
We talking technical OK? Yes, on my 24inch monitor it looks fine.On your galleries have you centralized the content? At the bottom of the images there are two in the centre. Is there a way to set the view size to large? It looks a bit much when it goes all the way from top to bottom of the screen in the lightbox.
Aesthetically (I'll remove this comment if you want) I think the roundness is too much. Perhaps half the whatever the pixel figure is would do it. Same for the shadow - it's nice, but too much. It distracts from the very nice images, which should be the main interest.
I do like Loki! Try saying that after a few glasses of Napa Valley.
I used Firefox 22.0
Thanks for the feed back. Will work on it. Thanks.
Thanks for the feed back. Will work on it. Thanks.
The lightbox thing I mentioned. I think it doesn't work with fill screen on rounded edges like it does with square because the corners are coming off the straight edge of the screen. It needs a bit of space between the edge of the shot and the screen edge. Does that make sense?
Tried to set mine to default to large, but I failed.
I've read through this whole thread, but I am surprised nobody has mentioned browser prefixes for border-radius yet. When I launched my first version of my site a year ago, this was still very important. It's amazing what a difference a year can make, and that's probably why no one has mentioned it.
I say all of this just for the few of you who like me sweat the details. If you don't understand what I'm saying or don't care, no harm done: an increasingly smaller minority of your viewers will just see square corners. However, for the few of you like me who want to get a few older browsers to render rounded corners, here's how.
First it's important to understand that the border-radius attribute (rounded corners) is part of the relatively new CSS 3 that is only now starting to become mainstream. There is still a large number (but now a minority) of people using browsers that were not compliant with CSS 3 in this regard. During the transition, several of the browsers implemented the same thing using prefixes, and in some instances, non-standard notation.
For example, Safari has implemented border-radius since 3.0, but it only started rendering standard code for it as of 5.0. Before that, you could get Safari to render rounded corners with it's own -webkit-border-radius attribute. That same thing goes for Chrome 0.2 to 4.0, but I think that's less of an issue because of forced updates (is that right?). Firefox likewise had -moz-border-radius since 1.0 until they began recognizing the official attribute as of 4.0. There are still a number of people who can't update past 3.6, or some who have just not updated even though they could (it wasn't automatic back then). So, to catch all of these stragglers, you can list all the border-radii like this:
Note further that Internet Explorer doesn't understand border-radius until version 9, and there were no prefixes either. The gotcha there is that XP users can't go beyond 8. Sure, they could go to one of the other browsers, but many of them have never bothered, or don't even know what a browser is (they just click on the blue E).
As for me, I just block access to my site if a viewer has IE 8 or lower, leaving them a notice to upgrade their browser or to get another one (I give them a link). I make a lot of use of CSS 3 in my site, so I don't want people seeing it in it's ugly and sometimes unpredictable form on older Internet Explorer versions. I'm sure that solution is impractical for most of you, especially if you are doing it to make sales. I just have my site for family and friends, and I can personally help them upgrade if they want.
(Actually, the truth is that besides the grandparents of my kids, I'm really doing this site for me, because I have fun doing it.)
As for me, I just block access to my site if a viewer has IE 8 or lower, leaving them a notice to upgrade their browser or to get another one (I give them a link). I make a lot of use of CSS 3 in my site, so I don't want people seeing it in it's ugly and sometimes unpredictable form on older Internet Explorer versions. I'm sure that solution is impractical for most of you, especially if you are doing it to make sales. I just have my site for family and friends, and I can personally help them upgrade if they want.
(Actually, the truth is that besides the grandparents of my kids, I'm really doing this site for me, because I have fun doing it.)
I would love to see a tutorial on how to that!! You should start a new thread!
I just noticed a weird behavior. If I set up a multi-photo block, and select the behavior to None, instead of Go to Gallery, the corner become square again.
I would love to see a tutorial on how to that!! You should start a new thread!
I just now posted another thread that tells you how to do it. I have specific steps with copy-n-paste code in the second post. I hope you find it helpful.
OK, below is my code for all my radii. It works fine for all browsers except when I use Safari 5.1.7 on my Win 8 PC. Would anyone have a clue what's up and how to fix? Can someone check it on a Mac please.
OK, below is my code for all my radii. It works fine for all browsers except when I use Safari 5.1.7 on my Win 8 PC. Would anyone have a clue what's up and how to fix? Can someone check it on a Mac please.
I'm seeing rounded corners in Safari 6.0.5 on Mac everywhere that I see on the Firefox rendering of the same pages. Where specifically are you having problems?
I'm seeing rounded corners in Safari 6.0.5 on Mac everywhere that I see on the Firefox rendering of the same pages. Where specifically are you having problems?
Sorry, in Safari 5.1.7 on my Win 8 PC I see square corners when looking at the folders and galleries. Rounded on the homepage slide show and once you get to the actual pics in the galleries.
Sorry, in Safari 5.1.7 on my Win 8 PC I see square corners when looking at the folders and galleries. Rounded on the homepage slide show and once you get to the actual pics in the galleries.
Ah, are you seeing some rounded, some not in the same place? I found that to be the case on your Browse page. I noticed it on my Mac Safari (current). Sometimes it fixes itself with scrolling. I've noticed it on my own site, and it was even more weird still. The same is true for Chrome. It sounds like a Webkit problem. I'll post more about it probably tomorrow.
Ah, are you seeing some rounded, some not in the same place? I found that to be the case on your Browse page. I noticed it on my Mac Safari (current). Sometimes it fixes itself with scrolling. I've noticed it on my own site, and it was even more weird still. The same is true for Chrome. It sounds like a Webkit problem. I'll post more about it probably tomorrow.
Everything is round in FF, IE, Chrome on all pages.
I'm pretty sure we're dealing with a rendering bug in Webkit. Here is what I see in Safari on your last link:
And in Chrome:
It's not consistent, and I don't think there is anything you can do about it, and I don't think it is a SmugMug error, although they could perhaps find a work-around if they needed to.
Webkit Bugs
In following up on the Webkit bug on rounded corner rendering consistency, the rounded corners in conjunction with photo descriptions is causing two errors on my site.
The first is that only some photos are not getting rounded corners. See for example this shot, which is from a thumbnail view in one of my galleries:
I marked with an X the photos that didn't get rounded corners. I can have whole galleries that don't exhibit this problem. It is somehow connected with the overlay of photo description that pops up on mouse hover, as is happening on the top left photo. That photo, as well as the bottom left photo are the only ones with a description. In this instance, every photo after the one with a discription in the same row is not rounded. Further testing shows that is not always the way it works, but so far it is always somehow connected to a photo with a description next to it. This problem manifests identically on both the latest Mac versions of Safari and Chrome.
The second problem is that photos with a description cause the text in my menu to go faint when I scroll so that the menu passes over one of those photos. Here is what I mean: This is what my menu is supposed to look like:
None of the photos above have descriptions. Now, if I scroll up only a few pixels, a photo with a description moves so that it is just barely under the menu at the top. Notice what happens to my text:
As you can see, the text goes faint, and it will stay that way until I roll away from any photos with a comment on them. Chrome also has this problem, but unlike the previous problem, this one manifests more subtly than in Safari. In Chrome, I don't think anyone would notice unless they were looking for it. The pictures above are Safari's version.
I haven't noticed how it works on these browsers in Windows. There's another problem there: the font looks plain ugly in Windows. I've never been a fan of Windows text rendering, and this is one of its worse examples.
Anyway, my example may be complicated by all the extra code I've done to the photos and menus. There is layer upon layer of effects. On the thumbnails, I have a pair of box-shadows on hover with transition effects, and the menu has tons of custom code with a fair amount of CSS 3. I was able to work around the problem by simply forcing the popup comments to be blocked. They aren't really any use anyway since it only shows the first four words or so. Once I blocked the comments, both of these problems disappeared.
I'm pretty sure we're dealing with a rendering bug in Webkit. Here is what I see in Safari on your last link:
And in Chrome:
It's not consistent, and I don't think there is anything you can do about it, and I don't think it is a SmugMug error, although they could perhaps find a work-around if they needed to.
Why? That goes from good on the left, to bad on the right.
Indeed, "overflow: visible" not only undoes the effect of the border-radius (because those corners are not clipped), but it negates the thumbnail crop. Now, "overflow:hidden" is something I tried when I was doing some research into this Webkit shortcoming. I had found that border-radius on an element does not clip the corners of child elements unless "overflow:hidden" is set to the parent element. However, it never solved my problem for me. It seems out of date, because Webkit browsers ARE clipping many of the borders like they should, but oddly not all of them, and inconsistently so. Notice how one of the images in the Safari example only has corners on half of it. It's the same code on all of them. I still suggest it is a Webkit bug. I've even several instances where many of the thumbs appear with square corners until I scroll a few pixels, then suddenly many of the corners will suddenly become rounded. It sounds like a bug to me.
This does bring up something else I noticed but a few days ago: it seems like the browser has to load more of each image than is being shown instead of a genuine square image. That would increase download time. I guess they figure that connection speeds are fast enough that it doesn't matter now. Or do the new browsers only download the visible part of the pictures? I don't even think that's realistically possible, but I could be wrong.
Indeed, "overflow: visible" not only undoes the effect of the border-radius (because those corners are not clipped), but it negates the thumbnail crop. Now, "overflow:hidden" is something I tried when I was doing some research into this Webkit shortcoming. I had found that border-radius on an element does not clip the corners of child elements unless "overflow:hidden" is set to the parent element. However, it never solved my problem for me. It seems out of date, because Webkit browsers ARE clipping many of the borders like they should, but oddly not all of them, and inconsistently so. Notice how one of the images in the Safari example only has corners on half of it. It's the same code on all of them. I still suggest it is a Webkit bug. I've even several instances where many of the thumbs appear with square corners until I scroll a few pixels, then suddenly many of the corners will suddenly become rounded. It sounds like a bug to me.
This does bring up something else I noticed but a few days ago: it seems like the browser has to load more of each image than is being shown instead of a genuine square image. That would increase download time. I guess they figure that connection speeds are fast enough that it doesn't matter now. Or do the new browsers only download the visible part of the pictures? I don't even think that's realistically possible, but I could be wrong.
It works there because you went about it slightly different way...and I really must look into it, because by that you managed to get non-square thumbnails in the thumbnail view. And then it would seem you put the border-radius on a different element than we are. Perhaps the img itself? (I haven't looked because I have to run.) Thanks for giving me the idea for how to get non-square thumbs!
It works there because you went about it slightly different way...and I really must look into it, because by that you managed to get non-square thumbnails in the thumbnail view. And then it would seem you put the border-radius on a different element than we are. Perhaps the img itself? (I haven't looked because I have to run.) Thanks for giving me the idea for how to get non-square thumbs!
I have did it this way to get the same look on any desktop or mobile device.
This does bring up something else I noticed but a few days ago: it seems like the browser has to load more of each image than is being shown instead of a genuine square image. That would increase download time. I guess they figure that connection speeds are fast enough that it doesn't matter now. Or do the new browsers only download the visible part of the pictures? I don't even think that's realistically possible, but I could be wrong.
Yup, it's loading the regular S/M/L/XL (all the way up to 3XL on Retina displays!) sizes, then just cropping them in the browser. The downloads do take a little bit longer, but probably not more than twice as long as a perfect crop. The main advantage is that you don't have a thousand small size variations to download as you browse around the site, if you see the same image in multiple places there's a good chance that the same image you already downloaded will fit perfectly.
Also, this way SmugMug no longer have to generate those perfectly-scaled images on the fly (that's very slow and expensive on the server-side, which itself adds a delay to the page loading).
Garrett, if your site is public, could you add a link to it in your signature or profile? That would make it easier to check out the problems you're having and offer solutions.
Garrett, if your site is public, could you add a link to it in your signature or profile? That would make it easier to check out the problems you're having and offer solutions.
Thanks for the offer of help. My site is not intended to be public, so I don't want it in my signature, but I wouldn't mind providing a link if I had a problem that I couldn't figure out, although it wouldn't matter at this point because I haven't unveiled yet. Actually though, the problem that we're trying to solve is with Sir_Eagle's site. Perhaps you were thinking about post #110 where I was mentioning a couple of problems that I am suspecting to be Webkit issues. I worked around them by removing the element that was apparently causing the conflict, but I mentioned it because it seemed to be a similar issue to Sir_Eagle's problem.
Thanks for the other insight too. I'm sure SmugMug sought the most efficient method for their servers.
Thanks for the offer of help. My site is not intended to be public, so I don't want it in my signature, but I wouldn't mind providing a link if I had a problem that I couldn't figure out, although it wouldn't matter at this point because I haven't unveiled yet.
Ah okay, cool.
Actually though, the problem that we're trying to solve is with Sir_Eagle's site. Perhaps you were thinking about post #110 where I was mentioning a couple of problems that I am suspecting to be Webkit issues. I worked around them by removing the element that was apparently causing the conflict, but I mentioned it because it seemed to be a similar issue to Sir_Eagle's problem.
Yeah, but your problem sounded more interesting . That issue on KMartin's site isn't currently occurring for me so it's hard to diagnose anything.
If you try to round thumbnails by rounding <img> tags, it won't work reliably on a list of gallery thumbnails. That's because the img tag on those extends outside the borders of its container (to crop it to size) so the rounded corners will end up being cropped off along with it. You have to round the .sm-tile element instead. I don't know if that's what KMartin was seeing, or what you were seeing, though.
There's a difference in the code for gallery thumbnails between images that have to be cropped horizontally and those that need to be cropped vertically. Portrait images need special code applied to them which vertially centres them. So it's possible that the elements you're seeing rounded corners fail on are only gallery thumbs that were originally portrait.
It certainly is that, and I'm glad you look at it that way. Maybe we can look into it when I finally unveil. In the meantime, I worked around it by hiding the photo description that pops up on hover. It didn't need to be there anyway since it only shows a few words. Now how it's related I can't say. And worse, none of the examples in Sir_Eagle's gallery has photo descriptions for us to take away.
If you try to round thumbnails by rounding <img> tags, it won't work reliably
On my site doing it that way wouldn't work at all. The thumbs are square, but none of the images are, so there would be clipping no matter what. So I didn't do it to the img. I'm also not doing it to the .sm-tile, but rather to the a element that is directly a child of the .sm-tile div. Now that could make a difference. Initially I couldn't get the .sm-tile to respond to a border-radius, but this time with a quick test I managed to succeed with an "overflow: hidden". Is that what others are doing? I didn't think about that before. Anyway, it would be worth investigating how using the a element rather than its parent works in Safari. For the moment, I've got Safari and Chrome behaving themselves, but I might move things around later to see how it goes. If it is working for me, perhaps it will help Sir_Eagle. I'll have to come back to it.
So it's possible that the elements you're seeing rounded corners fail on are only gallery thumbs that were originally portrait.
I wondered that in my initial testing, but there was no correlation. In my picture of my own site in post 110, every one of those are the same 2x3 landscape.
That issue on KMartin's site isn't currently occurring for me so it's hard to diagnose anything.
It is quite the issue, and I think you'll find it interesting. Below are four screen shots of the same part of his site as rendered in Safari, and they were made seconds apart. Between each shot I refreshed the page.
(I reduced the size after the screen shots were made, and I added the Xs). This boggles my mind. Four shots of the identical page made moments apart. I didn't do anything other than refresh. I didn't scroll; I didn't hover. That's just what came up each time. And every time, a different combination of good versus bad. I'm at a loss to explain that.
Comments
Why are you using a UL (unordered list) without LI's (list items) wrapping your anchors?
It would be more standard to use a <div> instead of the ul, or to add <li></li> around your hrefs.
a.s.
needed inside the <ul> tags worked but easier to switch it div's.
Thanks
My Website index | My Blog
would everyone take a look at my site with rounded corners and see if there is any issues anywhere with other browser and for antoher set of eyes on the page.
thanks
Jingle Imges
We talking technical OK? Yes, on my 24inch monitor it looks fine.On your galleries have you centralized the content? At the bottom of the images there are two in the centre. Is there a way to set the view size to large? It looks a bit much when it goes all the way from top to bottom of the screen in the lightbox.
Aesthetically (I'll remove this comment if you want) I think the roundness is too much. Perhaps half the whatever the pixel figure is would do it. Same for the shadow - it's nice, but too much. It distracts from the very nice images, which should be the main interest.
I do like Loki! Try saying that after a few glasses of Napa Valley.
I used Firefox 22.0
Thanks for the feed back. Will work on it. Thanks.
The lightbox thing I mentioned. I think it doesn't work with fill screen on rounded edges like it does with square because the corners are coming off the straight edge of the screen. It needs a bit of space between the edge of the shot and the screen edge. Does that make sense?
Tried to set mine to default to large, but I failed.
I say all of this just for the few of you who like me sweat the details. If you don't understand what I'm saying or don't care, no harm done: an increasingly smaller minority of your viewers will just see square corners. However, for the few of you like me who want to get a few older browsers to render rounded corners, here's how.
First it's important to understand that the border-radius attribute (rounded corners) is part of the relatively new CSS 3 that is only now starting to become mainstream. There is still a large number (but now a minority) of people using browsers that were not compliant with CSS 3 in this regard. During the transition, several of the browsers implemented the same thing using prefixes, and in some instances, non-standard notation.
For example, Safari has implemented border-radius since 3.0, but it only started rendering standard code for it as of 5.0. Before that, you could get Safari to render rounded corners with it's own -webkit-border-radius attribute. That same thing goes for Chrome 0.2 to 4.0, but I think that's less of an issue because of forced updates (is that right?). Firefox likewise had -moz-border-radius since 1.0 until they began recognizing the official attribute as of 4.0. There are still a number of people who can't update past 3.6, or some who have just not updated even though they could (it wasn't automatic back then). So, to catch all of these stragglers, you can list all the border-radii like this:
[COLOR=DimGray][I]SampleSelector[/I][/COLOR] { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }Note that if you if you need to specify particular corners, the old Firefox had a non-standard syntax, as in this example:[COLOR=DimGray][I]SampleSelector[/I][/COLOR] { -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 5px; }Note further that Internet Explorer doesn't understand border-radius until version 9, and there were no prefixes either. The gotcha there is that XP users can't go beyond 8. Sure, they could go to one of the other browsers, but many of them have never bothered, or don't even know what a browser is (they just click on the blue E).As for me, I just block access to my site if a viewer has IE 8 or lower, leaving them a notice to upgrade their browser or to get another one (I give them a link). I make a lot of use of CSS 3 in my site, so I don't want people seeing it in it's ugly and sometimes unpredictable form on older Internet Explorer versions. I'm sure that solution is impractical for most of you, especially if you are doing it to make sales. I just have my site for family and friends, and I can personally help them upgrade if they want.
(Actually, the truth is that besides the grandparents of my kids, I'm really doing this site for me, because I have fun doing it.)
I would love to see a tutorial on how to that!! You should start a new thread!
For blocking Internet Explorer? I can do that if you like.
Cool beans!
I just now posted another thread that tells you how to do it. I have specific steps with copy-n-paste code in the second post. I hope you find it helpful.
.sm-tile-single.sm-tiles-uncropped .sm-image { border-radius: 25px; box-shadow: 0 0 0 #000; max-width: 95%} .sm-page-widget-folders .sm-tile a, .sm-page-widget-galleries .sm-tile a, .sm-page-widget-nodes .sm-tile a, .sm-page-widget-pages .sm-tile a { border-radius: 10px; } .sm-gallery-roworganic img, .sm-gallery-columnorganic img { border-radius: 10px; } .sm-lightbox-image { border-radius: 25px; }I'm seeing rounded corners in Safari 6.0.5 on Mac everywhere that I see on the Firefox rendering of the same pages. Where specifically are you having problems?
Ah, are you seeing some rounded, some not in the same place? I found that to be the case on your Browse page. I noticed it on my Mac Safari (current). Sometimes it fixes itself with scrolling. I've noticed it on my own site, and it was even more weird still. The same is true for Chrome. It sounds like a Webkit problem. I'll post more about it probably tomorrow.
Everything is round in FF, IE, Chrome on all pages.
In Safari:
Round Corners
http://kmartin.smugmug.com/
http://kmartin.smugmug.com/Transportation/Aircraft/Helicopters
http://kmartin.smugmug.com/Transportation/Aircraft/Helicopters/i-HDvhh45/A
Square Corners
http://kmartin.smugmug.com/browse
http://kmartin.smugmug.com/Transportation
http://kmartin.smugmug.com/Transportation/Aircraft
I'm pretty sure we're dealing with a rendering bug in Webkit. Here is what I see in Safari on your last link:
And in Chrome:
It's not consistent, and I don't think there is anything you can do about it, and I don't think it is a SmugMug error, although they could perhaps find a work-around if they needed to.
In following up on the Webkit bug on rounded corner rendering consistency, the rounded corners in conjunction with photo descriptions is causing two errors on my site.
The first is that only some photos are not getting rounded corners. See for example this shot, which is from a thumbnail view in one of my galleries:
I marked with an X the photos that didn't get rounded corners. I can have whole galleries that don't exhibit this problem. It is somehow connected with the overlay of photo description that pops up on mouse hover, as is happening on the top left photo. That photo, as well as the bottom left photo are the only ones with a description. In this instance, every photo after the one with a discription in the same row is not rounded. Further testing shows that is not always the way it works, but so far it is always somehow connected to a photo with a description next to it. This problem manifests identically on both the latest Mac versions of Safari and Chrome.
The second problem is that photos with a description cause the text in my menu to go faint when I scroll so that the menu passes over one of those photos. Here is what I mean: This is what my menu is supposed to look like:
None of the photos above have descriptions. Now, if I scroll up only a few pixels, a photo with a description moves so that it is just barely under the menu at the top. Notice what happens to my text:
As you can see, the text goes faint, and it will stay that way until I roll away from any photos with a comment on them. Chrome also has this problem, but unlike the previous problem, this one manifests more subtly than in Safari. In Chrome, I don't think anyone would notice unless they were looking for it. The pictures above are Safari's version.
I haven't noticed how it works on these browsers in Windows. There's another problem there: the font looks plain ugly in Windows. I've never been a fan of Windows text rendering, and this is one of its worse examples.
Anyway, my example may be complicated by all the extra code I've done to the photos and menus. There is layer upon layer of effects. On the thumbnails, I have a pair of box-shadows on hover with transition effects, and the menu has tons of custom code with a fair amount of CSS 3. I was able to work around the problem by simply forcing the popup comments to be blocked. They aren't really any use anyway since it only shows the first four words or so. Once I blocked the comments, both of these problems disappeared.
You need this in the code
.sm-tile-content {
overflow: visible;
background-color: transparent!important;
}
www.jingleimages.com
Why? That goes from good on the left, to bad on the right.
Indeed, "overflow: visible" not only undoes the effect of the border-radius (because those corners are not clipped), but it negates the thumbnail crop. Now, "overflow:hidden" is something I tried when I was doing some research into this Webkit shortcoming. I had found that border-radius on an element does not clip the corners of child elements unless "overflow:hidden" is set to the parent element. However, it never solved my problem for me. It seems out of date, because Webkit browsers ARE clipping many of the borders like they should, but oddly not all of them, and inconsistently so. Notice how one of the images in the Safari example only has corners on half of it. It's the same code on all of them. I still suggest it is a Webkit bug. I've even several instances where many of the thumbs appear with square corners until I scroll a few pixels, then suddenly many of the corners will suddenly become rounded. It sounds like a bug to me.
This does bring up something else I noticed but a few days ago: it seems like the browser has to load more of each image than is being shown instead of a genuine square image. That would increase download time. I guess they figure that connection speeds are fast enough that it doesn't matter now. Or do the new browsers only download the visible part of the pictures? I don't even think that's realistically possible, but I could be wrong.
It works for me on my site.
It works there because you went about it slightly different way...and I really must look into it, because by that you managed to get non-square thumbnails in the thumbnail view. And then it would seem you put the border-radius on a different element than we are. Perhaps the img itself? (I haven't looked because I have to run.) Thanks for giving me the idea for how to get non-square thumbs!
I have did it this way to get the same look on any desktop or mobile device.
Yup, it's loading the regular S/M/L/XL (all the way up to 3XL on Retina displays!) sizes, then just cropping them in the browser. The downloads do take a little bit longer, but probably not more than twice as long as a perfect crop. The main advantage is that you don't have a thousand small size variations to download as you browse around the site, if you see the same image in multiple places there's a good chance that the same image you already downloaded will fit perfectly.
Also, this way SmugMug no longer have to generate those perfectly-scaled images on the fly (that's very slow and expensive on the server-side, which itself adds a delay to the page loading).
Garrett, if your site is public, could you add a link to it in your signature or profile? That would make it easier to check out the problems you're having and offer solutions.
Please check out my gallery of customisations for the New SmugMug, more to come!
Thanks for the offer of help. My site is not intended to be public, so I don't want it in my signature, but I wouldn't mind providing a link if I had a problem that I couldn't figure out, although it wouldn't matter at this point because I haven't unveiled yet. Actually though, the problem that we're trying to solve is with Sir_Eagle's site. Perhaps you were thinking about post #110 where I was mentioning a couple of problems that I am suspecting to be Webkit issues. I worked around them by removing the element that was apparently causing the conflict, but I mentioned it because it seemed to be a similar issue to Sir_Eagle's problem.
Thanks for the other insight too. I'm sure SmugMug sought the most efficient method for their servers.
Ah okay, cool.
Yeah, but your problem sounded more interesting
If you try to round thumbnails by rounding <img> tags, it won't work reliably on a list of gallery thumbnails. That's because the img tag on those extends outside the borders of its container (to crop it to size) so the rounded corners will end up being cropped off along with it. You have to round the .sm-tile element instead. I don't know if that's what KMartin was seeing, or what you were seeing, though.
There's a difference in the code for gallery thumbnails between images that have to be cropped horizontally and those that need to be cropped vertically. Portrait images need special code applied to them which vertially centres them. So it's possible that the elements you're seeing rounded corners fail on are only gallery thumbs that were originally portrait.
Please check out my gallery of customisations for the New SmugMug, more to come!
It certainly is that, and I'm glad you look at it that way. Maybe we can look into it when I finally unveil. In the meantime, I worked around it by hiding the photo description that pops up on hover. It didn't need to be there anyway since it only shows a few words. Now how it's related I can't say. And worse, none of the examples in Sir_Eagle's gallery has photo descriptions for us to take away.
On my site doing it that way wouldn't work at all. The thumbs are square, but none of the images are, so there would be clipping no matter what. So I didn't do it to the img. I'm also not doing it to the .sm-tile, but rather to the a element that is directly a child of the .sm-tile div. Now that could make a difference. Initially I couldn't get the .sm-tile to respond to a border-radius, but this time with a quick test I managed to succeed with an "overflow: hidden". Is that what others are doing? I didn't think about that before. Anyway, it would be worth investigating how using the a element rather than its parent works in Safari. For the moment, I've got Safari and Chrome behaving themselves, but I might move things around later to see how it goes. If it is working for me, perhaps it will help Sir_Eagle. I'll have to come back to it.
I wondered that in my initial testing, but there was no correlation. In my picture of my own site in post 110, every one of those are the same 2x3 landscape.
It is quite the issue, and I think you'll find it interesting. Below are four screen shots of the same part of his site as rendered in Safari, and they were made seconds apart. Between each shot I refreshed the page.
(I reduced the size after the screen shots were made, and I added the Xs). This boggles my mind. Four shots of the identical page made moments apart. I didn't do anything other than refresh. I didn't scroll; I didn't hover. That's just what came up each time. And every time, a different combination of good versus bad. I'm at a loss to explain that.