SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need little explanation on "A List Apart"s drop shadow technique

    So , i've learned how to drop a shadow from DIV's from this article which builds on A List Apart's article. I'm having some problems understanding it completley though. Here's part of the code (hard parts hilighted in red) :
    Code:
    .dropshadow{
    	float:left;
    	background: url(shadowAlpha.png) no-repeat bottom right !important;
    	background: url(shadow.gif) no-repeat bottom right;
    	margin: 10px 0 10px 10px !important;
    	margin: 10px 0 10px 5px;
    	width: 700px;
    	padding: 0px;
    }
    .innerbox{
    	position:relative;
    	bottom:6px;
    	right: 6px;
    	background : #EAF7FF;
    	border: 1px solid #29729B;
    	margin: 0;
    }
    - why is '.dropshadow' set so that IE reads the left margin as 5px and browsers that supports '!important' read the left margin as 10px?

    - Sorry if this sounds stupid , but what's the difference between 'top' , 'right , 'bottom', 'left' and 'margin-top' , 'margin-right'...etc?

    - Also , this box (with the drop shadow) lets other divs go underneath it in firefox. visit this link in firefox to see what i mean.


    appreciate your help
    Last edited by mPeror; Jul 8, 2005 at 18:18.

  2. #2
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone? It's not THAT hard (i guess)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    why is '.dropshadow' set so that IE reads the left margin as 5px and browsers that supports '!important' read the left margin as 10px
    This is because of ie's double margin bug on the side of a float nearest the containers edge. They simply needed to add display:inline as this fixes it perfectly and is better than using the method above. This is because the margin isn't exacty doubled and gets progressively worse as the size increases.

    Code:
    .dropshadow{
    float:left;
    background: url(http://www.mashhoor.ws/dropshadow/shadowAlpha.png) no-repeat bottom right !important;
    background: url(http://www.mashhoor.ws/dropshadow/shadow.gif) no-repeat bottom right;
    margin: 10px 0 10px 10px ;
    display:inline;
    width: 700px;
    padding: 0px;
    }
    Sorry if this sounds stupid , but what's the difference between 'top' , 'right , 'bottom', 'left' and 'margin-top' , 'margin-right'...etc?
    margin-top moves an element away from another element by at least the margin specified. If the other element has a greater margin on the adjacent top or bottom edge then the larger of the two margins will be in effect. (Margins on floats are not collapsed though).

    On the other hand top,left right or bottom when used with position:relative moves the element in relation to itself and with scant disregard for anything in its way. It does not change or disrupt the flow of the document in any way other than visually.

    It moves the element from where it was into the new position but leaving everything else where it was. Whereas margin-top would alter the whole flow of the document by moving the element by the margin specified causing other elements to also be repositioned (assuming they were floated or static).

    Relative positioning moves an element visually rather than physically as the space it originally occupied is always preserved.

    Also , this box (with the drop shadow) lets other divs go underneath it in firefox. visit this link in firefox to see what i mean.
    Floated elements are removed from the flow but make room for themselves by adding padding/margins to foreground elements such as text to allow them to float alongside. Floats do not repel backgrounds and mozilla correctly observes this. The backgrounds and borders of elements will slide underneath floated content.

    Ie on the other hand will incorrectly repel the background when the element has "layout" (and possibly at other times also).

    Hope that explains it a bit clearer for you

  4. #4
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea things are clear now , thanks alot. But how will i let IE behave like firefox? (or how do i stop the DIV from going underneath the "neatbox"?)

    waiting for your response in 18th of July

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could add clear:left to test to clear the float if that's what you meant
    Code:
    .test
    {
     background : beige;
     width : 200px;
     height : 200px;
    clear:left;
    }

  6. #6
    SitePoint Wizard mPeror's Avatar
    Join Date
    Mar 2005
    Location
    Saudi Arabia
    Posts
    1,724
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    perfect ! (even though i can't use margin to position "test" , but i can do it by changing position to relative so it's ok)

    Thank you soooo much Paul.


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
  •