Rounded corner box lines

[Jasnick]

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.

[noonnope]

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

[Jasnick]

That's clever - and quick!!! Do I do the same to the bottom?

Thank you so much!!

[noonnope]

Yeah, a quick fix indeed. If you like, yes, you can also make it work for bottom:

.rcbottom {
    background: url("uploads/images/rcbr.gif") no-repeat scroll right bottom transparent;
    position: relative;
    top: 1px;
}

Here's another solution:

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

div {
    padding: 1px 0;
}

So, remove this and you should not be needing any of the positioning.

[Jasnick]

.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

[Jasnick]

Oooops! Changed the -1px to 1px and now it works!

[Paul O'B]

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.

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

[Jasnick]

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!