SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to keep background image inside border-radius?

    I've got a list item nav menu in which the anchors have background images and rounded corners.

    However, the background image is not being clipped at the corners. Its showing through behind the curve.

    Can someone share with me what the workaround for this would be?



    Code:
    .menu.top {text-transform:uppercase; position:absolute; margin:30px 0 0 0; border:1px solid #ccc; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; height:50px; width:920px;background:url(header.gif); background:url(gradient.png), url(header.gif);}
    .menu.top.cat {overflow:visible;}
    .menu.top ul {position: relative; list-style: none; z-index: 50; float:left; margin:0 -999em 0 1px; padding:0;}
    .menu.top ul li {position: relative; float: left; margin:0 1px 1px 0;background:url(header.gif); background:url(gradient.png), url(header.gif);}
    .menu.top ul ul {position: absolute; visibility: hidden; list-style: none; z-index: 9999;}
    .menu.top ul ul li {display:block;width:100%}
    .menu.top ul ul ul {left:150px;}
    .menu.top ul ul li {clear: both;}
    .menu.top ul a {display: block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc}
    .menu.top ul ul ul {position: absolute; top: 0; }
    .menu.top ul li:hover ul, .menu.top ul a:hover ul, .menu.top ul :hover ul :hover ul, .menu.top ul :hover ul :hover ul :hover ul { visibility: visible;}
    .menu.top ul :hover ul ul, .menu.top ul :hover ul :hover ul ul { visibility: hidden; }
    .menu.top ul a:hover, .menu.top ul li.current_page_item a {background:url(spot.gif);background:url(gradient.png) repeat-x, url(spot.gif);color:#333; text-decoration:none;}
    .menu.top ul.children li.current-cat a {color:#333;}

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    check your code again. chances are that the border radius is not being applied to the tag with the bg image. Border radius doesnt clip content... ( sad, I know) but it doesnt so if the container has border radius, the children need to as well

    Code:
    .menu.top ul a {display: block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc}
    see, on border radius on your anchor.


    you probably don't want to have border radius on ALL your anchors in this menu , judging from the picture...
    so give the first anchor a class... which defines a border-radius of the left side only : border-radius:8px 0 0 8px;

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Dresden: thanks for that suggestion. I'm still stumped with this one though. I've added this css...

    Code:
    .menu.top li:first-child a {border-radius:8px 0 0 8px}
    But I'm still getting the image spillover on the background image. See the closeup below in which I've added some contrast to the container div element to better illustrate the problem.



    Perhaps it has to do with the fact that I'm using multiple background images on this anchor. I've got a spot color background image underneath a semi-transparent png.

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I'm almost there, here are the lines I had to change (but there's still a problem - see below code)...

    Code:
    .menu.top ul li {position: relative; float: left; margin:0 1px 1px 0;/*background:url(header.gif); background:url(gradient.png), url(header.gif);*/}
    
    .menu.top ul li a {display:block;  padding:0 20px; line-height:50px; color:#333; text-decoration:none; border-right:1px solid #ccc;background:url(header.gif);background:url(gradient.png), url(header.gif);}
    
    .menu.top li:first-child a {border-radius:8px 0 0 8px}
    OK, now this works on the first level. However, its also applying the first-child styling to the submenus (flyouts) as well, which I don't want. See below...



    This is a typical nested unordered list if that helps to understand the structure.

  5. #5
    SitePoint Member
    Join Date
    May 2008
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    It's hard to help without your html's code. I would guess using the child selector
    .menu.top>li:first-child a {border-radius:8px 0 0 8px}
    might fix it.

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    .menu.top li:first-child a {border-radius:8px 0 0 8px} will work. But I suggested ADDING A CLASS to prevent exactly wheat you are experiencing. :/


    Anyway if you dont feel like adding a class to your mark up, you can do an override.

    .menu.top li:first-child a {border-radius:8px 0 0 8px}
    .menu.top li li a {border-radius:0}

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,295
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I would try Candygirl's suggestion of a child selector first, as long as this doesn't need to work in older browsers like IE7 and under.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It would need to be this I believe otherwise you will other elements.

    Code:
    .menu.top> ul> li:first-child> a {
        border-radius:8px 0 0 8px;
        -moz-border-radius:8px 0 0 8px;
        -webkit-border-radius:8px 0 0 8px;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •