Grow your CSS skills. Land your dream job.

Corners aren’t showing up or not working right!

  • # June 16, 2009 at 10:20 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Know the wonder of your child's imagination!
    Kids
    Magazine Cover
    Stories | one per day

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

    Crafts | Ideas | Advice

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

    Sample Magazine

    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!

    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.

    Subscribe FREE

    What others are saying...

    “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!

    # June 16, 2009 at 11:01 am

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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".