CSS Rounded Corners Not Rendering Properly...

[jmroberts70]

Example pages:
http://www.bedofnails.tv/test01/characters.htm

http://www.bedofnails.tv/test01/characters2.htm
--this one I've added a small Javascript (CurvyCorners) to the code so that it will render the same in IE...

As you will see, the corners DO round themselves but the inner background remains "un-rounded". Can anyone tell me what I'm doing wrong?

My guess is that I have a non-radius'ed DIV box inside (like my "left" or "right" DIV) that is still square but I'm not sure. I thought it may be the images but I can see at the corners that it's just the color black that's showing and not the corner of the image...

 

[PrincessFrosty]

I had problems getting multiple divs to use curvy corners on the same page if I remember correctly, I can't remember what I did, I switched implimentation to be class based using css I think, I even recall running into a limitation with that and having to create multiple classes in the end.

This was a while ago, I might have also been doing something wrong though. I'll post my pcgamingstandards.com code later today when i get to work.

 

[jmroberts70]

Well even the page that doesn't use CurvyCorners has the same problem though. (then again, maybe it's actually the SAME problem...)

Thanks for the super-fast response!!

 

[PrincessFrosty]

In the head of my page I've used

        <!-- Curvey Corners -->
        <script type="text/JavaScript" src="<%=Page.ResolveUrl("~/JavaScript/curvycorners.js") %>"></script>
        <script type="text/JavaScript">

            addEvent(window, 'load', initCorners);

            function initCorners() {
                var settings = {
                    tl: { radius: 20 },
                    tr: { radius: 20 },
                    bl: { radius: 20 },
                    br: { radius: 20 },
                    antiAlias: true
                }
                
                var settings2 = {
                    tl: { radius: 5 },
                    tr: { radius: 5 },
                    bl: { radius: 5 },
                    br: { radius: 5 },
                    antiAlias: true
                }

                var settings3 = {
                    tl: { radius: 15 },
                    tr: { radius: 15 },
                    bl: { radius: 15 },
                    br: { radius: 15 },
                    antiAlias: true
                }

                curvyCorners(settings, ".curvy1");
                curvyCorners(settings2, ".curvy2");
                curvyCorners(settings3, ".curvy3");
            }
        </script>

Then in the html/aspx I use something like

<div id="news" class="curvy1">

I think maybe there was a bug with using the same class on a div imbedded inside a div already using that class, I can't remember it was a while ago now, but you could just make more than 1 class with the same properties just with a different name.

 

[jmroberts70]

**UPDATE**
Ok, I think I'm getting closer... Here's an updated URL:
http://www.bedofnails.tv/characters2.htm

I've managed to get the Javascript working with no CSS3 rounded corners being referenced in the stylesheet. So I know for sure it's JUST using this script for the rounded corners. I've fixed the code a bit (thanks to you, PrincessFrosty) and I think I know my problem:

--The rounded corners work with an image IF it is in the background... Here's a page I did get working with CurvyCorners:
http://www.bedofnails.tv/synopsis.htm

The problem with the Characters page is that the montage image to the left is an imagemap and if I take it out of the page code and make it a background image, I think I'll lose the association --and break the system. Any suggestions?

 

[PrincessFrosty]

Hmm, not sure. I use them as backgrounds on my site. It's not perfect ether it distorts the background in places as you can see in some of my divs, I might have to upgrade the JS file, my copy is like a year old now.

 

[jmroberts70]

Actually it looks pretty good to me! I'm thinking that my imagemap menu system I made on that page simply needs to go away. It would be nice to have a mouseover function there anyways so I may just have to find another way to do the same or similar thing...