Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Unhappy Border radius works - but background (?) shows...

    Hello everyone. My absence in posting shows how much I learnt, so teach me again!

    The problem: www.lsf2012.org. The bottom part, footer, is curved, but it has those annoying white corners. I have checked my code but nothing seems to work when I remove backgrounds. My code is below:

    Code:
    /* ---------------- GENERAL ---------------- */
    
    body {
    	font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; margin: 0; padding: 0; background-color:#CCCCCC;
    	background-image:url(../images/bg-leaves.png); background-repeat:repeat-x; background-position:25% 0%;}
    
    #sitewrapper {width:1100px; margin:auto; background-color:#ffffff; border-radius: 0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px;
    	-moz-box-shadow:0px 0px 10px #b6a184;
    	-webkit-box-shadow:0px 0px 10px #b6a184;
    	box-shadow:0px 0px 10px #b6a184;}
    
    /* ---------------- MAIN PAGE / CONTENT ---------------- */
    
    #bodywrapper {width:1100px; background-color:#ffffff;}
    
    #maincontent {width:1070px; background-color:#FFFFFF; margin:10px 15px 25px 15px; font-family:"Trebuchet MS"; font-size:14px; text-align:justify;}
    .index-header {font-family:Arial, Helvetica, sans-serif; font-size:27px; font-weight:bold; color:#0988bf;/* border-bottom:1px #CCCCCC solid; margin-bottom:25px;*/}
    .main-header {font:Georgia, "Times New Roman", Times, serif; font-size:24px; color:#0988bf;/* border-bottom:1px #CCCCCC solid; margin-bottom:25px;*/}
    .funfont { font-family:"Trebuchet MS"; color:#0988bf; font-size:14px;}
    .flag {margin-right:10px;}
    .introtext { font-family:"Trebuchet MS", Modern; font-size:22px; color:#333333; margin-top:50px; margin-bottom:25px;}
    .teamname-header {font:Georgia, "Times New Roman", Times, serif; font-size:22px; color:#666666; border-bottom:1px #CCCCCC solid; margin-bottom:25px;}
    
    #teamsports {width:525px; margin:auto; padding:3px; font-family:"Trebuchet MS"; font-size:14px; color:#666666; float:left;}
    .teamsports-header {font:Georgia, "Times New Roman", Times, serif; font-size:20px; color:#666666; border-bottom:1px #CCCCCC solid; margin-top:25px; margin-bottom:25px;}
    .teamsports-name {font:Georgia, "Times New Roman", Times, serif; font-size:20px; color:#666666; border-bottom:1px #CCCCCC solid; margin-top:25px; margin-bottom:25px;}
    
    /* ---------------- FOOTER ---------------- */
    
    #footer {clear:both; height:330px; width:1100px; margin:auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FFFFFF; background-color:#444444;border-radius: 0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px; margin-bottom:20px;}
    #footer-content {width:900px; margin:auto; padding-top:25px;}
    #footer-content .links {width:160px; font-family:Arial, Helvetica, sans-serif; color:#F2F2F2; float:left; padding:10px;}
    #footer-content .links-header {font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#F2F2F2; border-bottom:#CCCCCC solid thin; padding-bottom:5px; font-weight:bold;}
    #footer-content .copyright { width:1100px;font-family:Arial, Helvetica, sans-serif; font-size:9px; text-align:center; margin-top:20px; color:#f9f9f9;}
    li.linkfooter {list-style:none; margin-left:-25px;}
    li a:link {color:#ffffff;}
    li.linkfooter a:hover {color:#a5fbfc; font-weight:bold;}
    li a:visited {color:#ffffff;}
    Would you be able to tell where I went wrong?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,444
    Thanks
    11
    Thanked 310 Times in 309 Posts
    The white comes from:
    Code:
    #sitewrapper {
        background-color: #FFFFFF;
    How you want to fix it, there are probably a lot of ways.

    Dave

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by tracknut View Post
    The white comes from:
    Code:
    #sitewrapper {
        background-color: #FFFFFF;
    How you want to fix it, there are probably a lot of ways.
    Another cause is div#bodywrapper, which also has a white background.

    To the OP: To fix the problem, I would eliminate the following code from the #sitewrapper rule:

    Quote Originally Posted by http://www.lsf2012.org/css/maincss.css
    Code:
    background-color:#ffffff; border-radius: 0px 0px 15px 15px; -moz-border-radius:0px 0px 15px 15px;
    With that eliminated, I would specify the following in the #bodywrapper rule:

    Code:
    border-radius: 0 0 15px 15px;
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks - Tried it out but got some other errors which I need to correct. So painful after the site is live!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •