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

[nchipping]

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:

• 
• products
• pictures
• pricing
• customization
• contact us

• 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

[nchipping]

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:

• 
• products
• 
• pictures
• 
• pricing
• 
• customization
• 
• contact us

• 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

[AshtonSanders]

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.

[Author]

Posts