SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    0 Post(s)
    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.


    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.


    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 . 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
    New Zealand
    0 Post(s)
    0 Thread(s)

    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.
    Web Site Design


Posting Permissions

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