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 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Exclamation Border shadow does not reflect... CSS probs!

    Hi again!

    So this is happening again, the second time. I tried to modify it based on a previous post with a similar issue, but this won't work.

    The website is http://www.mombasajamaat.org/index-beta.php

    The code is:

    Code:
    /* ---------------- general ---------------- */
    
    div#page-container {
    width:100%;
    margin:auto;
    }
    
    html, body {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	line-height:1.5em;
    	vertical-align:middle;
    	margin: 0;
    	padding: 0;
    }
    
    /* ---------------- typography ---------------- */
    
    a:link {
    	color:#666666;
    	text-decoration:none; }
    a:visited {
    	color:#666666;
    	text-decoration:none; }
    a:hover {
    	color:#FF3300;
    	text-shadow:#FF3300;
    	text-decoration:none; }
    a:active {
    	color:#666666;
    	text-decoration:none; }
    
    /* ---------------- topbar for messages, twitter, facebook, and linkedIn ---------------- */
    
    div#topbarwrapper {
    	position:relative;
    	background:#181e5a;
    	width:100%;
    	height:45px;
    /*	background-image:-moz-linear-gradient(#d5d5d5, #ffffff);
        background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#ffffff));
        filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#ffffff); */
    }
    
    #topbarcontainer {
    	margin:auto;
    	width:1000px;
    	background:#181e5a;
    	height:44px;
    }
    
    #topbarcontainer .topbarcontainer {
    	float:right;
    	margin-right:20px;
    }
    /* ---------------- HEADER SECTION ---------------- */
    
    div#headerwrapper {
    	height: 200px;
    	width:100%;
    	margin:auto;
    	border-bottom:#181e5a thick solid;
    	background-image:-moz-linear-gradient(#d5d5d5, #ffffff);
        background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d5d5d5), to(#ffffff));
        filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#d5d5d5, endColorstr=#ffffff);
    }
    
    div#header {
    	position:relative;
    	width:1000px;
    	height:200px;
    	margin:0 auto;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:16px;
    	color:#CCCCCC;
    	background-image:url(../img/header_bg.png);
    	background-repeat:no-repeat;
    	background-position:center;
    }
    
    div#header .menu {
    	float:right;
    	right:20px;
    	top:40px;
    }
    
    div#header .headerbox {
    	position:relative;
    	width:1000px;
    	margin:auto;
    }
    
    .logo {
    	position:absolute;
    	line-height:1.2em;
    	left:20px;
    	top:20px;
    	font-family:Geneva, Arial, Helvetica, sans-serif;
    	font-size:30px;
    	color:#181e5a;
    }
    
    .logofontsmall {
    	font-size:24px;
    	font-variant:small-caps;
    	font-stretch:extra-expanded;
    	color:#666666;
    }
    
    /* ---------------- MAIN PAGE / CONTENT ---------------- */
    
    #bodywrapper {
    	width:100%;
    }
    
    #content {
    	width:1000px;
    	background-color:#FFFFFF;
    	margin:auto;
    	text-align:left;
    	-moz-box-shadow:0px 20px 20px #d5d5d5;
    	-webkit-box-shadow:0px 20px 20px #d5d5d5;
    	box-shadow:0px 20px 20px #d5d5d5;
    }
    
    #contentright {
    	margin-top:10px;
    	margin-bottom:25px;
    	width:730px;
    	background-color:#FFFFFF;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	float:right;
    	text-align:justify;
    	line-height:1.8em;
    	min-height:100%;
    }
    
    #contentright .padding{
    	padding:5px 5px 25px 5px;
    }
    
    #contentleft {
    	width:250px;
    	background-color:#FFFFFF;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	float:left;
    	margin:auto;
    }
    
    #contentleft .padding{
    	padding:5px 5px 25px 5px;
    }
    /* ---------------- FOOTER ---------------- */
    
    div.stripe{
        height:10px;
        border-bottom:1px solid #/*370045*/ffffff;
        border-top:1px solid #ffffff;
    	background-color:#181e5a;
    /*    background-image:-moz-linear-gradient(#181e5a, #500000);
        background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#181e5a), to(#500000));
        filter:progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#181e5a, endColorstr=#500000); */
    }
    
    #footer {
    	clear:both;
    	padding-top:3px;
    	height:100px;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#FFFFFF;
    	text-align:center;
    	background-color:#444444;
    }
    
    /* ---------------- MY BOXES MENU ---------------- */
    .mybox .title {
    	position:relative;
    	font-family:Arial, Helvetica, sans-serif;
    	text-indent:10px;
    	top:50%;
    	color:#181e5a;
    	font-size:18px;
    	height:32px;
    	margin-bottom:10px;
    /*	border:#CCCCCC thin solid;
    	-moz-border-radius: 10px 20px 2px 6px;
    	-webkit-border-radius: 10px 20px 2px 6px;
    	border-radius: 10px 20px 2px 6px; */
    }
    
    .mybox {
    	position:relative;
    	width:220px;
    	min-height:110px;
    	color:#666666;
    	margin-top:10px;
    	margin-left:auto;
    	margin-right:auto;
    	margin-bottom:25px;
    	padding-top:10px;
    }
    
    .mybox .title .img{
    	height:32px;
    	float:left;
    }
    
    /* ---------------- general ---------------- */
    
    .myimage-left {
    	margin:0px 10px 25px 10px;
    	float:left;
    }
    
    .myimage-right {
    	margin:0px 10px 25px 10px;
    	float:right;
    }
    
    h1 {
    	margin:0;
    	color:#666666;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:24px;
    	line-height:1.8em;
    }
    
    h2 {
    	margin:0;
    	color:#666666;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:20px;
    	line-height:1.8em;
    }
    
    h3 {
    	margin:0;
    	color:#666666;
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:17px;
    	line-height:1.8em;
    }
    
    .divider{
    	border-top: #999999 solid thin;
    }
    
    #committee-box {
    	margin:25px 0 0 25px;
    }
    
    #committee-box .title {
    	font-family:"Trebuchet MS";
    	font-size:12px;
    	text-align:right;
    	padding-right:10px;
    	padding-top:1px;
    	width:150px;
    	float:left;
    }
    
    #committee-box .name {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:14px;
    	text-align:left;
    	padding-left:10px;
    	width:150px;
    	float:left;
    }
    
    #committee-box .contact {
    	font-family:Georgia, "Times New Roman", Times, serif;
    	font-size:14px;
    	text-align:left;
    	padding-left:10px;
    	width:150px;
    	float:left;
    }
    
    .center {
    	text-align:center;
    	margin:auto;
    What I really need is the center part of the main content to get the border-shadow effect, and even though the attributes are there, it just won;t show. Where did I go wrong with the code? Please helP!

    And if you do tell me where the problem is, kindly give me just a brief on why it wouldn't work before I really am learning this on my own.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you see, when you float two objects (#contentleft & #contentright), you are taking them out of the flow of the page. in this sense, they do not exist anymore. therefore the parent (#content) becomes a height of 0. That's why you can't see the shadow, because the shadow was on (#content), which has a height of 0. By using clear: both; after the two floats, you are bringing BOTH the floated objects (#contentleft & #contentright) space back on the page. If you wanted only one height to be taken into account, you could clear just one with clear: left; or clear: right;. If you have 3 or more floated objects, you can bring them all back with clear: all;. Now you may be thinking, so I have to clear the floats everytime I want to float? Nope. If (#content) is a SET height (say 900px), then you can just set #content { height: 900px; }, therefore although the floats don't take up any room, the parent (#content) is 900px instead of 0. Hopes this makes sense!

    height: 0;


    cleared, height is once again dependent on the height of the greatest floated object
    Last edited by Sammy12; 10-30-2011 at 08:52 PM.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mnkhaki,
    I'm not sure what clear: all; will do for you. I'm not a big fan of adding an element for the sole purpose of clearing when there are often other methods available.

    See about the clear property here.

    See this explanation of how overflow: auto; clears your floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post
    you see, when you float two objects (#contentleft & #contentright), you are taking them out of the flow of the page. in this sense, they do not exist anymore. therefore the parent (#content) becomes a height of 0. That's why you can't see the shadow, because the shadow was on (#content), which has a height of 0. By using clear: both; after the two floats, you are bringing BOTH the floated objects (#contentleft & #contentright) space back on the page. If you wanted only one height to be taken into account, you could clear just one with clear: left; or clear: right;. If you have 3 or more floated objects, you can bring them all back with clear: all;. Now you may be thinking, so I have to clear the floats everytime I want to float? Nope. If (#content) is a SET height (say 900px), then you can just set #content { height: 900px; }, therefore although the floats don't take up any room, the parent (#content) is 900px instead of 0. Hopes this makes sense!
    No wonder - before I had it at a min-height of 600px and the shadow was there. When I removed it, the shadow went.. makes sense.

    Quote Originally Posted by Excavator View Post
    Hello mnkhaki,
    I'm not sure what clear: all; will do for you. I'm not a big fan of adding an element for the sole purpose of clearing when there are often other methods available.
    Thanks for your response - what would you suggest? Is there a way to have content left & right within the entire content itself without clearing? I will be making one more site soon and this will help me focus on what NOT to do when I start the next project.

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Sammy12 View Post

    cleared, height is once again dependent on the height of the greatest floated object
    Sammy - I used
    Code:
    <div style="clear:both;"></div>
    as you suggested to test it out - but it didn't work. It's still there... so, is there something else causing it?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,746
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by mnkhaki View Post


    Thanks for your response - what would you suggest?
    Check out that overflow: auto; method of clearing floats. See the link in my first reply.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    mnkhaki (10-30-2011)

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    44
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Check out that overflow: auto; method of clearing floats. See the link in my first reply.
    Thank you!! -I just did and it worked like a charm

    I'm beginning to have faith back in CSS


  •  

    Posting Permissions

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