Grow your CSS skills. Land your dream job.

How do I create a bottom shadow?!?!?

  • # May 27, 2009 at 3:25 pm

    I have been messing around with this for a while now, and can’t seem to get this shadow to work the right way. The site is
    [url]http:www.meandmyback.com/linearstars[/url]

    As you can see, I can’t get the bottom shadow to work. When I negatively margin it upwards, it just sits on top of the other image, and I also can’t get it to align in the middle of the page, but I have it outside of the container, in order to get it on the very bottom. I have tried it both ways, and just can’t seem to get it to work.

    HTML:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    • Why Linearstars LED fixtures?
    • + Long-lasting: 50,000 hour life. Or, simply put,
      four hours of light per day for 34 years.
    • + Energy-efficient: 10 to 20 times more energy
      efficient than halogen or xenon.
    • + Highly customizable: choose from 4 different body
      styles for specific applications, 18 different lengths,
      numerous light-output colors, fixture-body colors,
      and more, most for no charge.
    • + 5 year Manufacturer’s Warranty: One of the best
      warranties in the lighting industry. Rest assured
      that we stand behind our product, so you can, too.
    • + Learn more
    • - benefits
    • - products/
    • - pictures
    • - customization
    • - sizing & pricing
  • + Become a Dealer



CSS:

Code:
font { font:Arial, Helvetica, sans-serif; font-weight:400;}
body {background:#FFF;}
img {text-decoration:none; border:none;}

#shadow {background: url(../images/whole_dang_shadow_thingamaj.gif); width:1075px; background-repeat:repeat-y; margin:20px auto;}
#container {width: 1024px; height:640px; margin:50px auto; background:#FFF; border: solid 1px #666;}
#header {float: left; }
#nav {float:right; margin:-16px 70px 0px 0px;}
#nav ul {list-style:none; display:block; }
#nav ul li {float: left; list-style:none; display:block; text-align:center;}
#nav ul li a {text-decoration: none; color:#333;}
#nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
#nav ul li a:visited {text-decoration:none; color:#333;}

#content {font-size: 12px; margin: -25px 0px 0px 100px; float:left; width:250px; padding:10px;}
#content ul li {list-style:none}
#gallery {float: left; width:366px; height:210px; margin:0px 0px 0px 100px; border:solid 1px #333;}
#gallery-content {font-size: 14px; color: #333; width:272px; height: 80px;}

#footer {margin: 0 auto;}
#footer-shadow {margin: -12px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

.left {float:left;}
.header {float:left; margin: 25px 25px;}
.clear {clear:both;}
.black {color: #333;font-size: 14px; padding:42px 10px 0px 10px; text-align:center; border-right: solid 1px #666; }
.last {color: #333;font-size:14px; padding:42px 10px 0px 10px; text-align:center; border:none;}
.current1 {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

# May 27, 2009 at 5:19 pm

I fixed it pretty well, but now it just won’t work in IE properly… It works in Opera, Safari, Google Chrome, Firefox, & Netscape Navigator – I just don’t know how to fix what I did to make it work in IE.

Here’s the code for what I did:

Code:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



  • Why Linearstars LED fixtures?
  • + Long-lasting: 50,000 hour life. Or, simply put,
    four hours of light per day for 34 years.
  • + Energy-efficient: 10 to 20 times more energy
    efficient than halogen or xenon.
  • + Highly customizable: choose from 4 different body
    styles for specific applications, 18 different lengths,
    numerous light-output colors, fixture-body colors,
    and more, most for no charge.
  • + 5 year Manufacturer’s Warranty: One of the best
    warranties in the lighting industry. Rest assured
    that we stand behind our product, so you can, too.
  • + Learn more
  • - benefits
  • - products/
  • - pictures
  • - customization
  • - sizing & pricing
  • + Become a Dealer


  • And the CSS:

    Code:
    font { font:Arial, Helvetica, sans-serif; font-weight:400;}
    body {background:#FFF;}
    img {text-decoration:none; border:none;}

    #shadow {background: url(../images/whole_dang_shadow_thingamaj.gif); width:1075px; background-repeat:repeat-y; margin:20px auto;}
    #container {width: 1024px; margin:50px auto; background:#FFF; border: solid 1px #666;}
    #header {float: left; }
    #nav {float:right; margin:-16px 70px 0px 0px;}
    #nav ul {list-style:none; display:block; }
    #nav ul li {float: left; list-style:none; display:block; text-align:center;}
    #nav ul li a {text-decoration: none; color:#333;}
    #nav ul li a:hover {text-decoration:underline; color:#FFCC00;}
    #nav ul li a:visited {text-decoration:none; color:#333;}

    #content {font-family: Arial, Helvetica, sans-serif;font-size: 12px; margin: -25px 0px 0px 100px; float:left; width:250px; padding:10px;}
    #content ul li {list-style:none}
    #gallery {float: left; width:366px; height:210px; margin:0px 0px 0px 100px; border:solid 1px #333;}
    #gallery-content {font-size: 14px; color: #333; width:272px; height: 80px;}

    #footer {margin: -105px auto 0px;}
    #footer-shadow {margin: -55px auto; font-family:Arial, Helvetica, sans-serif; font-size:12px; }

    .left {float:left;}
    .header {float:left; margin: 25px 25px;}
    .clear {clear:both;}
    .black {color: #333; font-family:Arial, Helvetica, sans-serif; font-size: 13px; padding:45px 5px 0px 5px; text-align:center; }
    .last {color: #333; font-family:Arial, Helvetica, sans-serif; font-size:13px; padding:45px 5px 0px 5px; text-align:center; border:none;}
    .current1 {background: url(../images/nav/home-white.gif); width: 60px; height:70px;}

    Any suggestions? It’s the same site – http://www.meandmyback.com/linearstars

    # May 28, 2009 at 3:41 am

    Yea, to start, remove the repeat

    Code:
    background:transparent url(../images/whole_dang_shadow_thingamaj.gif) repeat-y scroll 0 0;

    should be

    Code:
    background:transparent url(../images/whole_dang_shadow_thingamaj.gif) no-repeat scroll 0 0;

    btw, lol at your image name.

    Getting the box to center perfectly inside that shadow image will take trying out all sorts of random things, and checking in all browsers (over and over) until you find a solution.

    I recommend reducing all unnecessary CSS for your center box to have a few possibilities of breaking in IE…

    Good luck.

    Viewing 3 posts - 1 through 3 (of 3 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".