Something causing break in rounded-corners box feature

[hadoob024]

I'm not exactly sure what's causing this issue. If you see the page at:

http://www.collegeapplicationconsulting.com/services.php


I've thrown in some dummy BR tags to make the page long. However, when it reaches a particular length, you can see this weird break in the continuity of the box. I think it has something to do with the sections of CSS code like

no-repeat bottom right
or
no-repeat bottom left

But I've tried playing around with those values and nothing fixes the broken box issue. Any thoughts?

[Andyram2k]

Hi hadoob024,
For the side bars, i would use border-left and border-right. If you position the top / bottom rounded curves correctly, this will appear seamless and will always continue to the bottom. Hope this helps in some way.

[hadoob024]

Sorry, but I'm still a newb with this CSS stuff. Where exactly would I use this border-left and border-right?

Here's my CSS code right now:

.roundedcornr_box_257154 {
background: url(images/roundedcornr_257154_tl.png) no-repeat top left;
max-width:1024px;
}
.roundedcornr_top_257154 {
background: url(images/roundedcornr_257154_tr.png) no-repeat top right;
max-width:1024px;
}
.roundedcornr_bottom_257154 {
background: url(images/roundedcornr_257154_bl.png) no-repeat bottom left;
max-width:1024px;
}
.roundedcornr_bottom_257154 div {
background: url(images/roundedcornr_257154_br.png) no-repeat bottom right;
max-width:1024px;
}
.roundedcornr_content_257154 {
background: url(images/roundedcornr_257154_r.png) top right repeat-y;
max-width:1024px;
}

.roundedcornr_top_257154 div,.roundedcornr_top_257154,
.roundedcornr_bottom_257154 div, .roundedcornr_bottom_257154 {
width: 100%;
height: 15px;
font-size: 1px;
}
.roundedcornr_content_257154, .roundedcornr_bottom_257154 {
margin-top: -19px;
}
.roundedcornr_content_257154 { padding: 0 15px; }

[hadoob024]

OK. I've made some headway. I made the following changes and it ALMOST works. Here's what I did:

I removed the outermost table so that the entire rounded box is not inside a table anymore. I did that and added width:75%; margin:0 auto; to .roundedcornr_box_257154


I then changed my CSS to the following:
.roundedcornr_content_257154 {/*contact.php (line 41)*/
/*padding:0 15px;*/
}
.roundedcornr_content_257154, .roundedcornr_bottom_257154 {/*contact.php (line 38)*/
/* margin-top:-19px; */
}
.roundedcornr_content_257154 {/*contact.php (line 27)*/
background:transparent url(images/roundedcornr_257154_r.png) repeat-y scroll right top;
border-left:1px solid #000000;
border-right:1px solid #000000;
max-width:1024px;
}


It works almost perfectly, except that if you check out the page now, you'll see a break in the top right-hand corner. Not sure what caused it though. Any thoughts?

[Andyram2k]

Hi Hadoob024,
I'm at work at the min, so can't really look at this in much detail yet. I've had a quick look at the background image, and there only appears to be a left hand curve, and nothing on the right hand side. Will have a look in more depth when i finish work tonight for you, unless anyone else on here fixes it first.

[hadoob024]

Cool. Thanks. Someone just suggested adding the following to my CSS code:

*{
margin:0;
padding:0;
}

That fixed the break. Although, now the various page title headers don't seem to align center anymore. Will be looking into this new issue now.

[hadoob024]

Well, I'm finally seeing the point in ditching tables. I'm able to get everything much better aligned now. Thanks for all the help!

[Andyram2k]

Cool, glad you got it sorted. Sorry for the late reply, i've been swamped with "homework" :)

I definately agree about ditching tables, i only ever use tables for tabular data.