I tried re-ordering the selectors but it's still displaying as a square in iPad (latest iPad model). Here you can see the round dates on the home page:
but in iPad they are square. Strange that it works on iPhone but not iPad. If anyone has an iPad so that they can verify that I have not gone crazy I would be grateful!
@teet: this is a different issue since you try to use rounded corners on an image, which is a known problem in various browsers.
@chrisjb: As for Nicehair.org: I'm thinking it might have something to do with the media query. You've set the breakpoint at exactly 768 pixels (if lower than that, don't use rounded corners) and I think it's not taking it well. Check the layout on an iPad and on a browser that has a 768 width, it's different.
Things you might want to try:
Add this line in your header, or experiment with some of those values:
I've never had this problem before but in a recent design the border-radius isn't working in iPad. I have no idea why!!!
Here is the CSS:
.article-date { background: #F3F3F3; width: 70px; height: 70px; padding: 19px 0; text-align: center; border-radius: 35px; -moz-border-radius: 35px; -webkit-border-radius: 35px; color: #999; font-size: 0.8em; }
(I've also got * { box-sizing: border-box; } on all elements).
On iPad the result in no rounded borders and no padding.
I searched Google and iPad doesn't have any problems with border-radius as far as I could determine.
Am I just missing something really stupid?!
I can't think of any reason why it should matter but is the unprefixed border-radius property listed after all of the prefixed versions?
I tried it on iPhone (should be same browser as iPad) and it works fine for me really. Got an example online?
Thanks Paulie_D and Senff,
I tried re-ordering the selectors but it's still displaying as a square in iPad (latest iPad model). Here you can see the round dates on the home page:
http://www.nicehair.org/
but in iPad they are square. Strange that it works on iPhone but not iPad. If anyone has an iPad so that they can verify that I have not gone crazy I would be grateful!
Thanks for your help
hey, check out www.teet.be on your latest iPad and PC, i have the same problem i think...
sorry, previous link wasn't correct, i hope this one will do: www.teet.be
@teet: this is a different issue since you try to use rounded corners on an image, which is a known problem in various browsers.
@chrisjb: As for Nicehair.org: I'm thinking it might have something to do with the media query. You've set the breakpoint at exactly 768 pixels (if lower than that, don't use rounded corners) and I think it's not taking it well. Check the layout on an iPad and on a browser that has a 768 width, it's different.
Things you might want to try:
Add this line in your header, or experiment with some of those values:
Or, instead of max-width in your media query, use max-device-width.
Maybe that'll get you on the right path.