- This topic is empty.
-
AuthorPosts
-
August 8, 2012 at 7:57 pm #39273Steve_JMember
This is my first post here, and First of all, I would like to thank all the pro’s here that give their time to help folks like me.
Now, that being said, I am stumped, I am developing an “open source” music site (so I don’t care about IE or Safari) since all the audio is in .ogg format. I have placed a page here
http://www.code-pigs.com/Html%205%20Audio/MenuTest.htm
that works flawlessly in Firefox, however, it does NOT work the same way in Chrome or Opera, as you can see, the image doesn’t have rounding in Chrome or OperaThe css is located here
http://www.code-pigs.com/Html%205%20Audio/PagePlayer.cssIf you need to see the markup, it is here
http://www.code-pigs.com/Html%205%20Audio/Rock/Billy%20Joel/Billy%20Joel.html.txtAs this site is just in the beginning, I need to get my template established and working correctly to continue on to other aspects.
Thanks in advance for any help, and hopefully an easy solution, else, I will need to make this a “Firefox” ONLY site.
Sincerely,
Steve
Ps: I don’t normally resort to asking for help, as I am a trained coder. But I have already tried MANY things and done much research to no avail.
August 8, 2012 at 8:00 pm #107544joshuanhibbertMemberChrome seems to have a bug with border-radius on elements that are parents of images (http://code.google.com/p/chromium/issues/detail?id=71639). The easiest way to fix it is to place the border radius on the img element.
Here is a simple demo of the problem: http://jsfiddle.net/joshnh/5tmQF/
August 8, 2012 at 8:13 pm #107547Steve_JMemberThx for your “immediate” response. I will try this and see what happens
August 8, 2012 at 8:37 pm #107550Steve_JMemberThank you, Thank you, Thank you. I tried this and it immediately worked, in both Chrome and Opera. I don’t have it perfect yet, but I am at least on the right track now
as the behavior is the same across all three browsersI now know where to come when I have a question
August 8, 2012 at 8:39 pm #107551Steve_JMemberBeginning Solution: add this to css
img{
width:100%;
padding:2px;
border:1px solid #bbb;-moz-border-radius:12px;
-webkit-border-radius:12px;
border-radius:12px;
overflow:hidden;
}August 8, 2012 at 8:50 pm #107553joshuanhibbertMemberGlad you were able to resolve your issue!
August 8, 2012 at 11:02 pm #107557joshuanhibbertMemberAugust 9, 2012 at 4:41 am #107565Steve_JMemberThx for all the helpful comments. I have cleaned up all the css now (eliminated the unnecessary browser pre-fixes etc) and am feeling good about that aspect. There is one other issue, but I think it is a JavaScript problem and will make sure I post it in the proper forum.
Again, thx for the help guys, as I have been pulling my hair out for weeks over this. And, at 56, I don’t have that much left to pull out :)
August 9, 2012 at 4:53 am #107567joshuanhibbertMemberYou’re welcome!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.