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 to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Internet Explorer Problem with CSS Drop Shadow in IE

    I'm having trouble with a CSS style I found on A List Apart tutorial. It's a basic div style that puts a drop-shadow image behind a div. I copied
    the script exactly and I think I've implemented it right. It works perfectly on Firefox but not so well on Internet Explorer. The top part of the div is being cutoff. I'm usually rather proficient with these sorts of problems but this
    time...

    The basic style is...

    .p-shadow div {
    background: none !important;
    background: url(http://coffeeandcassettes.fatcow.com/layout/
    shadow2.gif) no-repeat left top;
    padding: 0 !important;
    padding: 0px 6px 6px 0px;
    }

    .p-shadow p {
    color: #777;
    background-color: #fff;
    font: 1em georgia, serif;
    border: 1px solid #a9a9a9;
    padding: 4px;
    margin: -0.38em 0.38em 0.38em -0.38em !important;
    margin: 0;
    }


    The HTML is just the simple:

    <div class="p-shadow"><p>Some Text Here</p></div>

    You can see it used at my page: http://www.coffeeandcassettes.com

    My page is run with Blogger, I don't know if that's a factor. Any
    ideas?
    Last edited by josephiluminou; 05-08-2009 at 08:55 PM.

  • #2
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    2
    Thanked 1 Time in 1 Post
    From what I can tell all you need to do is change your top margin on .p-shadow p and make the margin-top:0px;

    That seemed to solve the issue on my end in FF and IE7

  • Users who have thanked thecaligarmo for this post:

    josephiluminou (05-08-2009)

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Perfect, thank you! I don't know why I couldn't have figured that out. I was confused by there being two different margin properties. the margin: 0; and the margin: -0.38em 0.38em 0.38em -0.38em !important;. I changed it to
    Code:
    margin: 0 0.38em 0.38em -0.38em !important;
    and it worked just like you said.

    Thank you very much.

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    58
    Thanks
    2
    Thanked 1 Time in 1 Post
    For future, having the two margins was really doing nothing. You just need to remember precedence:

    div {margin:0px; margin:1px;}

    Since the 1px margin is second, the div will have a 1px margin. But if we make the first one margin:0px !important, then the 0px margin is more 'important' than the 1px one so you end up with a 0px margin.

    So for your code you don't need the duplicate margins (or paddings)


  •  

    Tags for this Thread

    Posting Permissions

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