How to create a drop-shadow around the template like artisteer does?

Question

I'm new to the CSS thing; learned it yesterday (really) and I did some templates since then, I'm evolving quite fast, but there is one thing I can't quite get. How do you make a drop shadow around parts of the template without destroing the layout or having to deal with new problems.

I have created a CSS/HTML template that has a glass effect arround it and I was able to make it work using floats and absolute positioning within a relative div called wrapper but it doesn't work on IE7 and IE6 but works on all FF versions.

My question is:

How do I create a drop-shadow arround the template like artisteer does?

Answer 1

I meant DropShadow sorry...

Answer 2

hihi they use tables :)

for the way i think you want i to work, to work in ie you should define the height of the outer box:

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
</div>

#box {
  height: 100px;
  position: relative;
  width: 100px;
}
  .corner {
    background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
    display: block;
    height: 10px;
    position: absolute;
    width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }

Answer 3

Hi I gone ahead and made that self expandable, not sure it's gonna work on IE7 tho, I have windows 7 so I have IE8 as default and can't really test it. All i have to say is that I had no idea that setting "bottom 0;" "left 0;" would make the div stick to the bottom left and for that I can't thank you enough it's like a lamp just turn on on my brain and now I can do so much more, well still learning...

<style type="text/css">
#box {

  position: relative;
  width: 100px;
}
  .corner {
 background: url('http://www.wreckedclothing.net/images/corners.gif') no-repeat 0 0; /* img from google */
 display: block;
 height: 10px;
 position: absolute;
 width: 10px;
  }
  .tl { top: 0; left: 0; background-position: 0 0; }
  .tr { top: 0; right: 0; background-position: -22px 0; }
  .bl { bottom: 0; left: 0; background-position: 0 -22px; }
  .br { bottom: 0; right: 0; background-position: -22px -22px; }

  .content {padding:10px;}

</style>

<div id="box">
  <div class="corner tl"><!-- --></div>
  <div class="corner tr"><!-- --></div>
  <div class="corner bl"><!-- --></div>
  <div class="corner br"><!-- --></div>
  <div class="content">the name of jeremiah is jorge gonzaga I have no Idea where this came from!</div>
</div>