Forums

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
http:www.meandmyback.com/linearstars

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Linear Stars - Home Page</title>
<link href=\"stylesheets/main-style.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<div id=\"shadow\">
<div id=\"container\">
	<div id=\"header\">
    	<img style=\"float:left\" src=\"images/left-gray.gif\" alt=\"\"  />
        <img class=\"header\" src=\"images/linearstars-header.gif\" alt=\"Introducing the most innovative and customizable linear lighting solutions for cabinet, furniture and display lighting.\" title=\"linearstars\" />
    </div>
    <div id=\"nav\">
    <ul>
    	<li><a href=\"#\"><img src=\"images/nav/home-white.gif\" class=\"current1\" alt=\"home\" title=\"home\" /></a></li>
        <li class=\"black\"><a href=\"#\" title=\"products\">products</a></li>
        <li class=\"black\"><a href=\"#\" title=\"pictures\">pictures</a></li>
        <li class=\"black\"><a href=\"#\" title=\"pricing\">pricing</a></li>
        <li class=\"black\"><a href=\"#\" title=\"customization\">customization</a></li>
        <li class=\"last\"><a href=\"#\" title=\"contact us\">contact us</a></li>
    </ul>
    </div><!--END OF NAVIGATION-->
    <div class=\"clear\"></div>
    <div id=\"content\">
    <ul>
    	<li>Why Linearstars LED fixtures?</li><br />
        	
            	<li>+ Long-lasting:  50,000 hour life.  Or, simply put, 
  four hours of light per day for 34 years.</li><br />

				<li>+ Energy-efficient: 10 to 20 times more energy  
  efficient than halogen or xenon.</li><br />

				<li>+ 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.</li><br />

				<li>+ 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.</li><br />

				<li>+ Learn more</li>
                <ul>
                	<li>- benefits</li>
     				<li>- products/</li>
     				<li>- pictures</li>
				    <li>- customization</li>
     				<li>- sizing & pricing</li><br />
				</ul>
				<li>+  Become a Dealer </li>
			
	</ul>
    </div><!--END OF CONTENT-->
    <div id=\"gallery\">
    </div><!--END OF GALLERY-->
    <div class=\"clear\"></div>
    <div id=\"footer\">
    <img src=\"images/bottom_bar.gif\" alt=\"footer\" />
	</div>
    
    <div class=\"clear\"></div>
    	
    
</div><!--THIS IS THE END OF THE CONTAINER, AND THUS THE END OF THIS PAGE-->
<div id=\"footer-shadow\">
  	<img src=\"images/shadow_bottom.gif\" alt=\"shadow\" />
    </div>
</div><!--THIS IS THE END OF SHAOW, AND THE WHOLE PAGE-->
</body>
</html>

CSS:

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;}

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:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>Linear Stars - Home Page</title>
<link href=\"stylesheets/main-style.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>
<body>
<div id=\"shadow\">
<div id=\"container\">
	<div id=\"header\">
    	<img style=\"float:left\" src=\"images/left-gray.gif\" alt=\"\"  />
        <img class=\"header\" src=\"images/linearstars-header.gif\" alt=\"Introducing the most innovative and customizable linear lighting solutions for cabinet, furniture and display lighting.\" title=\"linearstars\" />
    </div>
    <div id=\"nav\">
    <ul>
    	<li><a href=\"#\"><img src=\"images/nav/home-white.gif\" class=\"current1\" alt=\"home\" title=\"home\" /></a></li>
        <li class=\"black\"><a href=\"#\" title=\"products\">products</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"#\" title=\"pictures\">pictures</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"#\" title=\"pricing\">pricing</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"black\"><a href=\"#\" title=\"customization\">customization</a></li>
        <li class=\"black\"><img src=\"images/nav/nav-separator.gif\" alt=\"\" /></li>
        <li class=\"last\"><a href=\"#\" title=\"contact us\">contact us</a></li>
    </ul>
    </div><!--END OF NAVIGATION-->
    <div class=\"clear\"></div>
    <div id=\"content\">
    <ul>
    	<li>Why Linearstars LED fixtures?</li><br />
        	
            	<li>+ Long-lasting:  50,000 hour life.  Or, simply put, 
  four hours of light per day for 34 years.</li><br />

				<li>+ Energy-efficient: 10 to 20 times more energy  
  efficient than halogen or xenon.</li><br />

				<li>+ 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.</li><br />

				<li>+ 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.</li><br />

				<li>+ Learn more</li>
                <ul>
                	<li>- benefits</li>
     				<li>- products/</li>
     				<li>- pictures</li>
				    <li>- customization</li>
     				<li>- sizing & pricing</li><br />
				</ul>
				<li>+  Become a Dealer </li>
			
	</ul>
    </div><!--END OF CONTENT-->
    <div id=\"gallery\">
    </div><!--END OF GALLERY-->
    <div class=\"clear\"></div>
  
    	
    
</div><!--THIS IS THE END OF THE CONTAINER, AND THUS THE END OF THIS PAGE-->
                            <div id=\"footer-shadow\"><!--THIS IS WHERE I NEED TO FIX THE SHADOW AND HOW IT WORKS!!!-->
                            <img src=\"images/shadow_bottom.gif\" alt=\"shadow\" />
                            </div>
                            <div id=\"container\">
                              <div id=\"footer\">
							    <img src=\"images/bottom_bar.gif\" alt=\"footer\" />
							</div>    
                            </div>
    <div class=\"clear\"></div>
</div><!--THIS IS THE END OF SHAOW, AND THE WHOLE PAGE-->
</body>
</html>

And the CSS:

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

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

should be

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.

treehouse : what would you like to learn today?

Forums

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