Can you tell why my content drop shadow isn't displaying correctly?

Discussion in 'HTML & Website Design' started by webdev2012, Oct 6, 2012.

  1. #1
    Hi,

    I'm reasonably new to web design so please bear with me...

    I am looking to build a website that will hopefully look something like below:

    Layout-6.jpg

    At the moment I am focusing on making a div which contains the top of the drop shadow (976 x 8px .png) and adds a 20 px margin to the top of the page. The margin has been added but the shadow won't display.

    If I comment out the background image, the shadow displays.

    Here is a link to an uploaded version of the page:

    mytestingplace .com

    Do you know why this might be happening?

    Thanks
     
    webdev2012, Oct 6, 2012 IP
  2. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #2
    Use CSS instead:
    Google this term and go to first link. I'm not allowed to post links yet. Just registered
    CSS3 gen com box shadow

    Post it on each ID you want it to be shown. I'm not sure why it's not working that way, but either way, that's way outdated.
     
    ntmedia, Oct 6, 2012 IP
  3. webdev2012

    webdev2012 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for the advice ntmedia.

    The method I was going to use is better for cross-browser and older browser support. It's actually a very simple and straight forward method if it wasn't for something in my webpage (bg image probably) stopping it from working.

    Unfortunately my web page design doesn't allow for one simple CSS shadow. The header, nav bar left, main content, footer; these all need separate shadows and they need them on specific sides only. Otherwise the shadow from the main content spills onto the navbar for example. From what I have found on google so far, CSS would be a very long-winded and complex way of achieving this.

    I might try a different background stretching technique.

    Thanks again.
     
    webdev2012, Oct 6, 2012 IP
  4. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #4
    Well, it's gonna be a boomer doing it, but it's really not that bad.

    For older IE (that has problem with those shadow), google pie.js javascript edition
     
    ntmedia, Oct 6, 2012 IP
  5. webdev2012

    webdev2012 Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Cheers mate.

    I ended up just doing it using CSS like you recommended. I guess we can't keep designing sites for IE6 forever. :)
     
    webdev2012, Oct 7, 2012 IP