Home/ Questions/Q 7713987
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T02:00:39+00:00

My Thumbnails should have some shadows, I’d like to do this with some absolutely

  • 0

My Thumbnails should have some shadows, I’d like to do this with some absolutely positioned div‘s, because tables would create empty space in the bottom in IE. And the div‘s also don’t work in Internet Explorer.

Here’s what my code looks like:

<div class="shadow text_box">
    <div class="slt"><font size="-1">&nbsp;</font></div>
      <div class="st"> <font size="-1">&nbsp;</font></div>
      <div class="srt"><font size="-1">&nbsp;</font></div>
    <div class="sl"><font size="-1">&nbsp;</font></div>
       <div class="sr"><font size="-1">&nbsp;</font></div>
    <div class="slb"><font size="-1">&nbsp;</font></div>
      <div class="sb"><font size="-1">&nbsp;</font></div>
      <div class="srb"><font size="-1">&nbsp;</font></div>

//Imagine, here's an image!

</div>

the css:

.text_box { background:#F7D76C; }

.shadow { position:relative;padding:0px;margin:8px; }

.slt { width:8px;height:8px;background:url(../img/shadow_left_top_xs.png) no-repeat bottom right; 
       position:absolute;top:-8px;left:-8px;height:8px;width:8px; }

.st { height:8px;background:url(../img/shadow_top_xs.png) repeat-x bottom left; 
      position:absolute;top:-8px;left:0px;height:8px;width:100%; }

.srt { width:8px;height:8px;background:url(../img/shadow_right_top_xs.png) no-repeat bottom left; 
       position:absolute;top:-8px;right:-8px;height:8px;width:8px; }

.sl { width:8px;background:url(../img/shadow_left_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;left:-8px;height:100%;width:8px; }

.sr { width:8px;background:url(../img/shadow_right_xs.png) repeat-y bottom right; 
      position:absolute;top:0px;right:-8px;height:100%;width:8px; }

.slb { width:8px;height:8px;background:url(../img/shadow_left_bottom_xs.png) no-repeat bottom right; 
       position:absolute;bottom:-8px;left:-8px;height:8px;width:8px; }

.sb { height:8px;background:url(../img/shadow_bottom_xs.png) repeat-x bottom left; 
      position:absolute;bottom:-8px;left:0px;height:8px;width:100%; }

.srb { width:8px;height:8px;background:url(../img/shadow_right_bottom_xs.png) no-repeat bottom left; 
       position:absolute;bottom:-8px;right:-8px;height:8px;width:8px; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Adding a shadow is an aesthetical feature that has absolutely no real consequence other than to look slightly prettier.

    Therefore, it is perfectly reasonable and acceptable to make the feature available only to supporting browsers, disregarding the old ones.

    Consequently, just use box-shadow: 0px 0px 8px 4px black and behold the awesome look of the shadow.

    Seriously, nobody’s going to miss a shadow around an image if they don’t update their browser.

    • 0