Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to get border-radius working in Chrome and Opera

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #39273
    Steve_J
    Member

    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 Opera

    The css is located here
    http://www.code-pigs.com/Html%205%20Audio/PagePlayer.css

    If you need to see the markup, it is here
    http://www.code-pigs.com/Html%205%20Audio/Rock/Billy%20Joel/Billy%20Joel.html.txt

    As 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.

    #107544

    Chrome 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/

    #107547
    Steve_J
    Member

    Thx for your “immediate” response. I will try this and see what happens

    #107550
    Steve_J
    Member

    Thank 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 browsers

    I now know where to come when I have a question

    #107551
    Steve_J
    Member

    Beginning 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;
    }

    #107553

    Glad you were able to resolve your issue!

    #107557
    #107565
    Steve_J
    Member

    Thx 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 :)

    #107567

    You’re welcome!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.