SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Shadows - how to properly contain elements that have shadows and are floated ?

    Hello all,

    I have an issue regarding two elements signed with a red border here:

    http://help.nuvemk.com/testStructure4/

    Those two containers should allow their children to have their shadow border displayed, while themselves should NOT have any shadow border defined.

    So:
    Code CSS:
    #training-organizations
    #events-facebook

    Should contain but NOT have any shadow borders.

    While the child elements:
    Code CSS:
    #trainings-resume
     #organizations-resume
     #events-resume
     #facebook-resume

    Should have their shadow properly displayed.
    Code CSS:
    box-shadow:*1px 1px 3px #999999;

    Whenever we do this, and we try to apply this, we will notice that the right and left shadows never appear! (due to overflow hidden perhaps?)

    I'm trying my best to deal with this, but nothing seems to work.
    Should we forget about overflow hidden on this case, and try to contain the floats using the clear:fix method, or is there a simpler solution ?

    Thanks in advance,
    m.

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    yeah! Solved.
    Not sure however if it's the proper way for doing it.

    Issue declarations and appropriate solution:

    Code CSS:
    #training-organizations, #events-facebook {
        overflow: hidden;
        clear: both;
        margin: 0 auto;
        max-width: 60em; <-- change to 58.8em
        min-width: 440px;
        padding: 7px 0; <-- instead of 0 give 1% (this will display the border);
        width: 98%;
    }


  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I thought I could contribute some key concepts about box shadow that might help (even if the cause some disappointment).

    1) By the spec, box shadow is supposed to act as if it want part of the box model. Although FF has a bug that will cause scroll bars to occur if the rendered shadow fall outside the viewport.

    2) Overflow hidden WILL hide box-shadows as well.


    Essentially what you have done is made the content are smaller AND allowed space in the parent for the shadow to be rendered and not hidden by the PARENT ELEMENT's overflow.

    A more graceful way of doing it :

    Code:
    #training-organizations, #events-facebook {
        overflow: hidden;
        clear: both;
        /*margin: 0 auto; I ma unclear as to why this is here?  if the original width of these element was 100% why did they need to be centered via this method?*/
        max-width: 60em;
        min-width: 440px;
        padding: 7px; /*this  is extra room for your shadow  to display*/
        /*width: 98%; You don't need this, block elements default to 100% INCLUDING padding, but if you declare width padding will be ADDED, eg: 100% +7px +7px*/
    }
    Hope that clears things up

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    A more graceful way of doing it :

    Code:
    #training-organizations, #events-facebook {
        overflow: hidden;
        clear: both;
        /*margin: 0 auto; I ma unclear as to why this is here?  if the original width of these element was 100% why did they need to be centered via this method?*/
        max-width: 60em;
        min-width: 440px;
        padding: 7px; /*this  is extra room for your shadow  to display*/
        /*width: 98%; You don't need this, block elements default to 100% INCLUDING padding, but if you declare width padding will be ADDED, eg: 100% +7px +7px*/
    }
    Hope that clears things up
    Thanks a lot.

    I actually couldn't get rid of the 1% on the left and right padding, because the all structure would change.
    But I've removed the strange 58.8 and the width of 98% and the, since the width would be 100% I have also removed the margin: 0 auto; as suggested.

    Like so:
    Code:
    #training-organizations, 
    #events-facebook {
        overflow : hidden;
        clear:both;
    /*    margin: 0 auto;*/
        max-width:60em;
        min-width:440px;
    /*    width:98%; */
        padding : 7px 1%; 
    }
    This is my first fluid layout and I was struggling at some points. This was precious to me:
    Quote Originally Posted by dresden_phoenix View Post
    You don't need this, block elements default to 100% INCLUDING padding, but if you declare width padding will be ADDED, eg: 100% +7px +7px*/
    One question still remains, isn't it better to redeclare things like define width of our elements with 100% just to make sure browsers or whatever, for some reason don't have that, or is this absurd ?

  5. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oikram View Post
    One question still remains, isn't it better to redeclare things like define width of our elements with 100% just to make sure browsers or whatever, for some reason don't have that, or is this absurd ?
    You won't need to declare the width:100%; for block level elements unless they are receiving a width from a previous statement. e.g.:

    Code css:
    #results li {
      width:80%;
    }
    #results li.wide {
      width:100%;
    }

    Like dresden_phoenix said, it's important to remember that when a block level element has its width set to "auto" (which is the default value), the padding is inclusive of the width (and as a result the box will only ever be as wide as its parent). Unless of course your padding causes the box to exceed its parents width e.g.:
    Code css:
    /* Assuming <div id="content"> <div id="content_inner"></div> </div> */
    #content {
      width:500px;
    }
    #content_inner {
      padding:50px 300px; /* will push to 100px wider than #content */
    }



    Additional reading: http://css-tricks.com/2841-the-css-box-model/ , http://reference.sitepoint.com/css/boxmodel
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    One question still remains, isn't it better to redeclare things like define width of our elements with 100% just to make sure browsers or whatever, for some reason don't have that, or is this absurd ?
    No you DON'T need to re declare width. ALL browsers have give BLOCK elements ( and elements which have been given display:block) a width equal to their containing element ( for all intents and purposes 100%) by default. This have never been a question, and you can count on it .

    Remember declaring width changes how border and padding are added to it.

    IF for some reason you have a rule were you declared width and wanted to go back to 'default' then use this: width:auto; instead of width:100% ( unless, you its actual final dimension to be the elements width+padding left+padding right+ border left + border right)

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All clear (for now).

    Thanks a lot.


Bookmarks

Posting Permissions

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