SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corner box lines

    I have used this method for many sites with no issues including sites with CMS's.

    Am converting a site to CMS and have added some round corner boxes. For some reason, there are lines projecting from the top and bottom corners except for the left bottom. I have been looking at this all day and have changed every measurement I can think of but still they remain.

    http://westwebtest.com/

    Can anyone spot the problem?

    Thanks.

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    .rctop {
        background: url("uploads/images/rctr.gif") no-repeat scroll right top transparent;
        position: relative;
        top: -1px;
    }
    
    .rctop div {
        background: url("uploads/images/rctl.gif") no-repeat scroll left top transparent;
        border: 0 none;
        position: relative;
        top: -1px;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's clever - and quick!!! Do I do the same to the bottom?

    Thank you so much!!

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, a quick fix indeed. If you like, yes, you can also make it work for bottom:
    Code:
    .rcbottom {
        background: url("uploads/images/rcbr.gif") no-repeat scroll right bottom transparent;
        position: relative;
        top: 1px;
    }

    Here's another solution:
    Code:
    .rcbox {
        background: url("uploads/images/rcgrad.gif") repeat-x scroll left top #FFFFFF;
        margin: 20px auto;
        width: 90%;
        position: relative;
    }
    
    .rctop {
        background: url("uploads/images/rctr.gif") no-repeat scroll right top transparent;
        position: absolute;
        top: 0;
    }
    
    .rctop div {
        background: url("uploads/images/rctl.gif") no-repeat scroll left top transparent;
        border: 0 none;
        position: absolute;
        top: 0;
    }


    ... but your problem starts from here:
    Code:
    div {
        padding: 1px 0;
    }
    So, remove this and you should not be needing any of the positioning.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .rcbottom {
    background: url("uploads/images/rcbr.gif") no-repeat scroll right bottom transparent;
    position: relative;
    top: -1px;
    }

    I used this for the bottom divs but it didn't work.

    .rcbottom div {
    background: url("uploads/images/rcbl.gif") no-repeat scroll left bottom transparent;
    border: 0 none;
    position: relative;
    top: -1px;
    }

    What is the purpose of using "scroll"?

    Thank you

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oooops! Changed the -1px to 1px and now it works!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It should be +1px not -1px as you are moving it down the page and not up.

    Your problems have all arisen from this global rule you set for all divs.

    Code:
    div {
      padding: 1px 0;
    }
    That's was probably set in place to stop margin collapse but I would never use a global rule like that because has such far reaching effects (as you have found out).

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2008
    Location
    Western Australia
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, you are correct! I don't normally use it but I was following a tutorial in a liquid design manual and it was used. I'll get rid of it. Probably why I have not had this issue before! There is such a thing as too much knowledge and not using it correctly!

    Thank you for your help! I do appreciate it!


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
  •