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:
<div id=\"body-header\"> <img style=\"margin:20px auto;\" src=\"images/body-header2.png\" alt=\"Know the wonder of your child's imagination!\" /> <img style=\"margin:-125px 0px 20px 750px; border:#47C3D3 solid 1px;\" src=\"images/kids_reading_homepage.gif\" alt=\"Kids\" /> </div>
<div id=\"body-left\"> <img src=\"images/magazine-cover.jpg\" alt=\"Magazine Cover\" /> </div> <div id=\"body-left2\"> <div class=\"stories\"><b>Stories</b> | one per day</div> <p>Nothing inspires a love for reading like having an exciting new story, every single day of the month!</p> <div id=\"winmoney\"> <ul> <li><a href=\"#\">Learn More</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Submit</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Win $</a></li> </ul> </div> <div class=\"crafts\"><b>Crafts</b> | Ideas | Advice</div> <p>Need ideas to do with your kids? Read what other moms have done and share your own ideas, too! </p> <div id=\"winmoney\"> <ul> <li><a href=\"#\">Learn More</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Submit</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Win $</a></li> </ul> </div> <a href=\"#\"><img style=\"margin:20px 0px 0px 0px;\" src=\"images/sample-magazine.png\" alt=\"Sample Magazine\" title=\"Sample Magazine\" /></a> </div> <div id=\"body-right\"> <div class=\"art\"><b>Art</b> | for kids by kids</div> <p>Bring out the artist in your child! See art from children around the world, and submit your child's art, too!</p> <div id=\"winmoney\"> <ul> <li><a href=\"#\">Learn More</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Submit</a></li> <li style=\"color:#00AEEF\">|</li> <li><a href=\"#\">Win $</a></li> </ul> </div> <div class=\"more\"><b>More!</b></div> <p>There's so much more to Knowonder. Subscribe today for <b>FREE</b> and discover the joy of imagining, creating, reading and being a kid with your kid.</p> <a href=\"#\"><img style=\"margin:45px 0px 0px 0px;\" src=\"images/subscribe-free.png\" alt=\"Subscribe FREE\" title=\"Subscribe FREE\" /></a> </div>
<div class=\"clear\"></div>
</div><!-- END OF THE FIRST BODY AREA --> <div class=\"tr\"></div> <div class=\"tl\"></div> <div class=\"br\"></div> <div class=\"bl\"></div> </div><!--END OF INSIDE AREA, AND THUS THE AREA WHERE ROUNDED CORNERS CAN BE -->
</div><!-- END OF CONTAINER, AND THUS THIS MAIN TOP PART OF THE PAGE -->
<div id=\"container2\">
<div id=\"left\"> <img style=\"margin:20px auto;\" src=\"images/what-others-say.png\" alt=\"What others are saying...\" /> <p>“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!” <br /></p> <p style=\"float:right;\">-- Janice B., NY. </p><br /><br />
<p>“Very cool, and also very cute! This looks like a winner. My family will be subscribing for a long time to come.”<br /> </p> <p style=\"float:right;\">-- Susan K., MI.</p><br /><br />
<p>“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!” <br /></p> <p style=\"float:right;\">-- Lucinda M., NB.</p><br /><br /> </div>
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 :)
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:
And the CSS:
* {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!