SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS - shadowed images

    I've altered the design on my portfolio site a bit - I've added png drop shadows to the thumbnails using CSS. Now each thumbnail is contained within a div.

    The problem is, in Firefox the subheader paragraph that comes below the thumbnails is now acting all wonky.

    EXHIBIT A


    Because Internet Explorer doesn't support transparent png's, I've made it display the drop shadow as a solid color, which is fine. Internet Explorer is displaying the design how I've asked it to.

    EXHIBIT B


    See how the subheaders aren't acting all wonky in IE? But they are in Firefox?

    This is the CSS for the shadowed thumbnails:

    .img-shadow {
    float: left;
    background: url(images/shadow.png) no-repeat bottom right !important;
    background: url(images/shadow.gif) no-repeat bottom right;
    margin-top: 0px !important;
    margin-bottom: 5px !important;
    margin-left: 15px !important;
    margin-right: -10px !important;
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 7px;
    margin-right: -2px;
    }

    .img-shadow img {
    display: block;
    position: relative;
    background-color: #fff;
    border: 1px solid #e4c57d;
    margin: -5px 5px 5px -5px;
    padding: 0px;
    }

    And here is a link to my site http://www.9des.com/ . Look at it in both Firefox and IE and you'll see what I mean. It's driving me crazy! Anyone know how to fix it?

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK.

    To start, please validate your HTML. It won't validate because the DTD declaration is inside the HTML. Move it to the top of your page.

    Then validate your CSS. There are quite a large number of errors in it. Some matter. Some don't.
    1) Add # in front of all your colours.
    2) Add px to your length declarations.
    3) Fix any other highlighted problems.

    When you have done this I think most of your problems will disappear.

    Come back if they don't.
    fisherboy
    Web Site Design


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
  •