How do I wrap drop shadow around webpage

HTML & CSS
1

Okay I am at my wit’s end! I want to make this drop shadow end at the bottom of the web page. I also would like to make a drop shadow appear on the bottom of this page going horizontally. But I will deal with that later.
Can someone PLEASE tell me how to stop this drop shadow from going passed where the page ends?
Here is the link Page with drop shadow
I want to keep the CSS all internal on the web page instead of external.
Thank you.

<!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></title>


<style type="text/css">
<!--
body {
    background-color: #e9e9e9;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: repeat-y;
    background-position:center;
    background-image: url(images/backgroundimage.jpg);
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
}
.style1 {
    font-size: 12
}
.style2 {
    font-size: 12px;
    font-weight: bold;
}
.style4 {font-size: 14px}
.style5 {font-size: 14px; font-weight: bold; }
.style6 {font-size: small}
.style3 {color: #FFFFFF}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<script id="gwScript" type="text/javascript">                        function gwCall(method, argStr)                            
      {                                                          
         var gwProxy = window.document.getElementById('gwProxy');
         if (gwProxy)                                            
         {                                                        
            gwProxy.setAttribute('gwMethod', method);            
            gwProxy.setAttribute('gwArgStr', argStr);            
            var e = document.createEvent('MouseEvents');          
            e.initEvent('click',true,true);                      
            gwProxy.dispatchEvent(e);                            
         }                                                        
      }                                                          
                                                                  
      function jsCall()                                          
      {                                                          
         var jsProxy = document.getElementById('jsProxy');        
         if (jsProxy)                                            
         {                                                        
            var jsCode = jsProxy.getAttribute('jsCode');          
            eval(jsCode);                                        
         }                                                        
      }                                                          
                                                                  
      function Gateway()                                          
      {                                                          
         var _P4r4m5_ = {};                                      
         this.addParam = function(name,value)                    
         {                                                        
            _P4r4m5_[escape(name)] = escape(value);              
         }                                                        
                                                                  
         this.callName = function(callName)                      
         {                                                        
            var paramStr = '';                                    
            for (name in _P4r4m5_)                                
            {                                                    
               paramStr = paramStr+                              
                          ((paramStr == '') ? '' : '&')+          
                          name+'='+_P4r4m5_[name];                
            }                                                    
            gwCall(callName, paramStr);                          
         }                                                        
      }                                                          
                                                                  
   function showIFrame(name, url)                                
      {                                                          
         frames[name].location.href = url;                        
      }                                                          
                                                                  
      function createSrcScriptElement(srcPath)                    
      {                                                          
         var js = document.createElement('script');              
         js.setAttribute('type', 'text/javascript');              
         js.setAttribute('src', srcPath);                        
         document.getElementsByTagName('head')[0].appendChild(js);
      }                                                          
                                                                  
      function createInlineScriptElement(escapedJsCode)          
      {                                                          
         try{                                                    
            var js;                                              
            if(document.standardCreateElement)                    
               js = document.standardCreateElement('script');    
            else                                                  
               js = document.createElement('script');            
            js.setAttribute('type', 'text/javascript');          
            js.text = unescape(escapedJsCode);                    
            document.getElementsByTagName('head')[0].appendChild(js);
         }                                                                            
         catch(e){                                                                
            //alert(document.createElement);                        
            //alert('ERROR: createInlineScriptElement(): '+e);      
         }                                                                            
      }                                                          
                                                                  
      function invokeInGuiThread(callName, argPtr)                
      {                                                          
         var gwObj = new Gateway();                              
         gwObj.addParam('argPtr',argPtr);                        
         gwObj.callName(callName);                                
      }                                                          

</script><body onload="MM_preloadImages('images/buttons_over/home_over.gif','images/buttons_over/bootcamp_over.gif','images/buttons_over/dailydozen_over.gif','images/buttons_over/events_over.gif','images/buttons_over/programs_over.gif','images/buttons_over/about_over.gif','images/buttons_over/directions_over.gif')">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="970">
 <tr>
    <td width="970" align="center" valign="top"><img src="" alt="" width="970" height="167" /></td>
  </tr>
</tbody></table>

<table bgcolor="#0000ff" border="0" cellpadding="0" cellspacing="0" width="970">
  <tbody><tr>
    <td align="center" valign="top">

    
    
    <table border="0" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td align="center"  height="20" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/buttons_over/home_over.gif',1)"><img src="images/buttons_off/home_off.gif" name="Home" width="102" height="27" border="0" id="Home" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Boot Camp','','images/buttons_over/bootcamp_over.gif',1)"><img src="images/buttons_off/bootcamp_off.gif" name="Boot Camp" width="102" height="27" border="0" id="Boot Camp" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Daily Dozen','','images/buttons_over/dailydozen_over.gif',1)"><img src="images/buttons_off/dailydozen_off.gif" name="Daily Dozen" width="102" height="27" border="0" id="Daily Dozen" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','images/buttons_over/events_over.gif',1)"><img src="images/buttons_off/events_off.gif" name="Events" width="102" height="27" border="0" id="Events" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Programs','','images/buttons_over/programs_over.gif',1)"><img src="images/buttons_off/programs_off.gif" alt="" name="Programs" width="102" height="27" border="0" id="Programs" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','images/buttons_over/about_over.gif',1)"><img src="images/buttons_off/about_off.gif" alt="" name="About" width="102" height="27" border="0" id="About" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Directions','','images/buttons_over/directions_over.gif',1)"><img src="images/buttons_off/directions_off.gif" alt="" name="Directions" width="102" height="27" border="0" id="Directions" /></a></td>

         <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover=""><img src="images/buttons_off/contact_off.gif" alt="" name="Contact " width="102" height="27" border="0" id="Contact " /></a></td>
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#ffffff" valign="top"><img src="images/buttonsdropshadow.gif" height="8" width="816"></td>
  </tr>
</tbody></table>
</center>




<center>
</center>




<!--Session data-->
<div id="refHTML"></div>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>

    
    
    
    <table width="863" border="0" align="center" cellpadding="10" cellspacing="3">
      <tr>
        <td valign="top" align="center" width="496" ><iframe width="480" height="430" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe><br /><small><a href="">View Larger Map</a></small>
        
          </td>
        <td valign="top" align="center"width="318"><table height="77" border="0" cellpadding="1" cellspacing="3">
          <tr>
            <td width="287" height="21" align="center" valign="top"><div>
              <div align="center"><img src="" alt="Where is s?" height="24" /></div>

            </div></td>
          </tr>
          <tr>
            <td  valign="top" align="center"> <div align="left" class="style1">
              <p><span class="style4">Address removed</strong></span><br />

                <br />
                  <span class="style2">'s  office hours are as follows:            </span>
            </div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC"><div align="left" class="style2">
              Mondays, Wednesday &amp; Fridays
            
            </div></td>

          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">6:00am - 1:00pm 4:00pm -10:00pm</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Tuesdays &amp; Thursdays</div></td>
          </tr>

          <tr>
            <td  valign="top" align="center"><div align="left"><span class="style4">6:00am - 2:00pm 4:00pm -9:00pm</span></div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Saturdays</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">9:00am - 3:00pm</div></td>

          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Sundays</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">Off</div></td>
          </tr>
        </table></td>

      </tr>
    </table></td>
  </tr>
</table>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
  <tr>
    <td valign="middle" ><div  align="center" class="style2 style3">All rights reserved. </div></td>
    <td align="right"><img src="images/transparentspacer.gif" width="1" height="30" /></td>
  </tr>

</table>
</body></html>
2

It isn’t going past the end of the page, that whitespace at the bottom is part of your page

    <td colspan="3">&nbsp;</td>
3

I’m not sure I totally understand. I commented this out and I still have the same problem.

4

Well you must be doing something wrong because the issue goes away lol :slight_smile:

Actually, there is no reason for that entire <tr> there. Remove the <tr> (then the <td> with the &nbsp in it from above)

5

It’s still not working. No wonder I’m a failure at this.

6

Copying/pasting the HTML from your first post, this is how the bottom of the page looks

There’s no area where the shadow extends past the content

7

Go into firebug and right click the empty space at the bottom and hit inspect element. Assuming you clicked there then it will show the code that Dan posted in post #2.

Giving that specific element a display:none (same as commenting it out) removes the space :).

8

Hi if had done this in html & css it would been like eating pie & I refuse 2 help those who use tables 2 design sites it is for displaying data…

Well heres how u should get this done u should create a
<div class=“fade”>
All your other code (vomit) tables <tr> <td> etc…check width of webpage & then create a http://www.go2africa.com/images/ver6/body_bg.jpg image like this & set the css in the in the css file like this: body { repeat-x; url:imagePath }
</div>

Hope this helps…I’ve created this some thing u call a problem…

9

RyanReese that did the trick! It fixed it! And now I can appreciate Firebug!
Thank you ALL for your help! This includes the first poster.
Oh yes, and I will stop using Tables as soon as I learn the alternative.
I’m a happy man right now!
Thank you!!! :slight_smile:

10

Now I have a new problem. One of the pages seems to have been fixed in Fireworks. However, the same problem occurs when I view it in IE or Google Chrome.
Drop Shadow Still Too Long

11

Hi, the only reason FF doesn’t display it is because the FF window is cluttered with toolbars and thus the actual viewport is smaller.

You could create taht page into a sticky footer and that would eliminate the problem altogether :slight_smile:
http://www.pmob.co.uk/temp/sticky-footer-ie8new-no-table.htm

12

But the first page works correctly in IE but not the Directions page.
I will try to learn what a sticky footer is. There must be something wrong with my code…

13

Listen, I just explained :).

IE is not filled with toolbars and such, and as a result their viewport has more space vertically. Thus it’s a bigger page.

Opera/chome are the same way. They have no toolbars and as such they have more vertical space. You set the image on the <body> and as a result it will fill the viewport.

You could actually just wrap everything in a <div> (everything from <body> to </body>) and place the image there. That would stop the d rop shadow from extending further down :slight_smile:

Ignore my sticky footer comment, and do my <div> comment

14

Okay I understand what you’re saying. I tried the <div> and it did not work. I will try it again.

Please look at these two pages in IE. And then choose F11. The Welcome Page stops at the bottom. However the [URL=“http://chrislupetti.com/mrbilltest/directions.html”]Directions Page keeps on going. I even took everything out of the page in the Welcome Page and tested it in IE and it still ended at the bottom.
I hope I am clear and I am not totally missing your point. :slight_smile:

15

RyanResse my apologies. I went into Fireworks and did ctr - and made the welcome page smaller. As you said the background shadow kept on going down. You were right.
I just have to learn how to wrap a background image in a <div> now. :slight_smile:

16

Can I ask another question?
I see some websites that have a 2x2 gif that is the same color as the hex color as a background image. My guess is to make it run down the page. That’s my guess.
Can I use a dropshadow as another background image without having to use it in a <td>?
Is there rooms for two background images? Hope I made sense.
Thanks

17

You probably are making sense however I can’t seem to understand whta you are saying. Making a visual reference would help me :slight_smile:

18

I got the drop shadow to rap around the page using the <div> and a CSS Class. However, some of the pages heights are shorter than the others. The drop shadow just keeps on going in the shorter page. How can I fix that?
Thanks again.

19

Considering the page probably has changed, can you provide a fresh link?

Did you set a height on the <div>? Any min-height? That’s probably the issue, though I haven’t even looked at any code so I’m guessing :slight_smile:

20

As Ryan said, your links are all dead now, so we can’t see your site.

I’ve not seen this thread before, so this might be irrelevant, but Eric Watson has a nice example of an expanding border shadow:

http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow-demo.php