Grow your CSS skills. Land your dream job.

CSS Round Corners Problem

  • # October 27, 2012 at 2:51 am

    Below is the CSS I have to round the corners of my Nav Bar on my website. Not sure why it is not working. Can anyone see the issue ?

    .horizontalNavigationBar {-webkit-border-top-right-radius: 8px; -moz-border-radius-top-right: 8px; border-top-right-radius: 8px; -webkit-border-top-left-radius: 8px; -moz-border-radius-top-left: 8px; border-top-left-radius: 8px;}

    http://fsjjobs.squarespace.com/

    # October 27, 2012 at 4:00 am

    There seems to be two navigation (Top & Bottom) areas overlaying one another.

    It’s very odd.

    My guess is that the effect is working but there is something on top of it hiding the effect.

    In fact, if you turn of the ‘display:none’ on line 834 for your NavigationTop, you can see that a border-radius is being applied.

    # October 27, 2012 at 12:36 pm

    Is there a reason that you have two overlaying navigation bars?

    # October 27, 2012 at 5:18 pm

    There is a background-color on .canvasWrapper. It seems to be the source of your problem.

    # October 27, 2012 at 7:28 pm

    Thanks everyone! I was able to solve this problem.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".