Corners aren’t showing up or not working right!

[nchipping]

I have recently been working on knowonder.com and have some issues… I am trying to round my corners on just the main top body area first, and then I will do it on the other sections, but I can’t get it to work properly.

I have been following Chris’ rounded corners video, and I’m trying to use the 2nd option, because I don’t want my corners disabled if someone doesn’t use allow JavaScirpt on their browser.

Anyway, the bottom right and left corners show up, but they aren’t hiding the background behind them (the square corners). The top left and right corners are in my code, but aren’t showing up on the page – I have no idea why…

Please take a look at http://www.knowonder.com/index.php and you’ll see what I mean. Here’s the code:

Code:

• 
• |
• 

• ABOUT
• |
• MAGAZINE
• |
• MEDIA
• |
• SUBSCRIBE
• |
• SUBMIT
• |
• CONTACT US

Stories | one per day

Nothing inspires a love for reading like having an exciting new story, every single day of the month!

• Learn More
• |
• Submit
• |
• Win $

Crafts | Ideas | Advice

Need ideas to do with your kids? Read what other moms have done and share your own ideas, too!

• Learn More
• |
• Submit
• |
• Win $

Art | for kids by kids

Bring out the artist in your child! See art from children around the world, and submit your child’s art, too!

• Learn More
• |
• Submit
• |
• Win $

More!

There’s so much more to Knowonder. Subscribe today for FREE and discover the joy of imagining, creating, reading and being a kid with your kid.

“I can’t wait to get my hands on this magazine! What a great idea!
I love reading, and I know the importance of having new matieral
all the time to help my kids stay interested in reading. Thank you,
Knowonder, for such a great product!”

— Janice B., NY.

“Very cool, and also very cute! This looks like a winner. My family
will be subscribing for a long time to come.”

— Susan K., MI.

“As an elementary teacher, I can tell you that new material, every
day, is one of the biggest keys to helping a child love reading. New
adventures, new problems, new challenges, new friendships…
There’s nothing like an exciting story to excite the imaginations of
our children. I will support Knowonder!”

— Lucinda M., NB.

• 
• 
• 

And the CSS:

Code:

* {margin:0px auto; padding:0px;}

p {font-family:Arial, Helvetica, sans-serif;}

ul {font-family:Arial, Helvetica, sans-serif;}

img {text-decoration:none; border:none;}

body {background:url(../images/background_03.png); background-repeat:repeat;}

#container {width: 980px; position: relative; margin:30px auto; border:solid 1px #E977AF; background:#FFF;}
#container2 {width: 980px; margin:30px auto;}
#container2 p {margin:0px 50px 5px 50px; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

#header {padding:5px 0px 0px 0px;}

#login {float: right; list-style:none; color:#CCC; margin:-80px 10px 0px 0px;}
#login ul {list-style:none;}
#login ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}

#magazine-free {float: left; margin:-100px 0px 0px 400px;}

#nav {margin: 0px 0px 0px 0px; width:980px; height:25px; background:#E977AF; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#nav ul {list-style:none; margin:5px 0px 0px 245px; padding:5px 0px;}
#nav ul li {list-style:none; float:left; padding:0px 5px 0px 5px;}
#nav a {color:#FFF; text-decoration:none}
#nav a:hover {color:#FFF; text-decoration:none;}
#nav a:visited {color:#FFF; text-decoration:none}

#body {background: #D3EDF1; width:875px; margin:30px auto; padding:0px 0px 20px 0px; border:#47C3D3 solid 1px;}

#body-header {margin:10px 0px 0px 0px;}

#body-left {float: left; width:232px; margin:0px 0px 10px 30px;}

#body-left2 {float: left; width:253px; margin:13px 0px 10px 30px; font-family:Arial, Helvetica, sans-serif;}
#body-left2 p {color:#00AEEF; margin:5px 0px 5px 20px; font-size:13px;}

#body-right {float: right; width:253px; margin:13px 30px 10px 0px; font-family:Arial, Helvetica, sans-serif;}
#body-right p {color:#00AEEF; margin:5px 0px 5px 20px; font-size:13px;}

#winmoney {list-style:none; float:right; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
#winmoney ul {list-style:none}
#winmoney ul li {list-style:none; float:left; margin:10px 5px 15px 5px;}

#winmoney a {text-decoration:none; color:#00AEEF;}
#winmoney a:hover {text-decoration:underline; color:#00AEEF}
#winmoney a:visited {text-decoration:none; color:#00AEEF;}

#left {width:468px; height:430px; border:#E977AF solid 1px; float:left; background:#FFF;}

#right {width:468px; height:430px; border:#E977AF solid 1px; float:right; background:#FFF;}

#right-nav {margin:50px 0px 0px 180px; list-style:none;}
#right-nav ul {list-style:none;}
#right-nav ul li {list-style:none; float:left; margin:10px 8px;}

.clear {clear:both;}
.stories {color:#FF9933; font-size:22px;}
.art {color:#A0CF67; font-size:22px;}
.crafts {color:#F173AC; font-size:22px;}
.more {color:#5F4B9F; font-size:22px;}

/*BOX STUFF*/
.inside {width: 980px; margin:30px auto;}
.inside .tl { position: absolute; width: 15px; height: 15px; background: url(../images/corners/tl.png); top: -100px; left: -100px; }
.inside .tr { width: 15px; height: 15px; background: url(../images/corners/tr.png); position: absolute; top: -100px; right: -100px; }
.insdie .bl { width: 15px; height: 15px; background: url(../images/corners/bl.png); position: absolute; bottom: -5px; left: -5px; }
.insdie .br { width: 15px; height: 15px; background: url(../images/corners/br.png); position: absolute; bottom: -5px; right: -5px; }

Any help would be GREATLY appreciated!

[nchipping]

I fixed it – I found out that I had accidentally put "insdie" instead on "inside" on two of the four corners, so either the top worked with "inside", or the bottom worked with "insdie" – I worked it out :)

[Author]

Posts