Member Avatar for havilah

Hi, I'd been looking for a code that can help me put a shadow on my page. I finally found something I decided to twik a bit...just like this:

<style type="text/css">
<!--
body {
background-image: url(images/bg_grd.gif);
background-repeat: no-repeat;
}
.centerContentShadow
{
    background-image: url(images/bg-trns.png);
    background-repeat:repeat-y;
    width:800px;
	margin-top: -20px;
    z-index:-1;
}
#centerContent
{
    background-image: url(images/bg-inner.gif);
    width:770px; 
    margin-left:12px;
	margin-right:12px;
   	border-left:1.2px solid #003366;
    border-right:1.2px solid #003366;
}

-->
</style>

....and then the

<body><center><div class="centerContentShadow"><div id="centerContent">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div></div>
 </center>
</body>

...Don't mind the '<p>' tags. Was just trying to pull down the div to appreciate the effect. It's working well in Opera and Firefox but not IE. Can anyone show me what I need to do? You can check out the page here
Thanks,
Havilah
ATTN: Deacon, if u r still here, longtime? I'd really I appreciate your input in this. Thanks

  • 4 Contributors
  • 6 Replies
  • 118 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Fungus1487

Dani AI

Generated

A short diagnosis tied to the thread: ’s approach uses a transparent PNG shadow behind an inner content div and works in Firefox/Opera but not IE. was correct to flag old IE’s PNG alpha limitations, and ’s nested-border idea is a valid non-PNG fallback. Two separate issues are worth addressing here: PNG alpha support in IE6 and stacking/z-index behavior when elements are not positioned.

A modern, minimalist solution (progressive enhancement) is to use CSS3 shadows for browsers that support them:

#content {
  width: 770px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

For legacy IE (5–6) there are three practical fallbacks:

  • Serve a pre-rendered shadow image with a 9-slice approach (four corner images + repeatable edge images). This avoids PNG alpha issues because corners can be GIF/PNG8 without full alpha and edges tile cleanly.
  • Use a conditional-comment stylesheet for IE6 and apply Microsoft’s AlphaImageLoader filter to the shadow image (note: AlphaImageLoader does not tile/repeat and has performance/printing quirks).
  • Use IE-only filters like DXImageTransform.Microsoft.Shadow as a last resort (visual only, limited control).

A couple of troubleshooting tips that address things not yet resolved in the thread:

  • z-index only applies when an element is positioned. Give the shadow wrapper position: absolute (and the container position: relative) rather than relying on an unpositioned element with z-index:-1.
  • Avoid using lots of empty <p> tags to create vertical space; use padding or min-height on the content container.
  • Replace the deprecated <center> tag with margin: 0 auto on a block container and ensure a standards DOCTYPE so IE renders predictably.

These options let the page keep a soft shadow in modern browsers while providing sensible fallbacks for IE5/6 without relying on fragile PNG-alpha hacks.

Recommended Answers

All 6 Replies

Member Avatar for Fungus1487

it looks fine to me ? ive just looked at it in ie 7 wat ver of ie u used ?

Member Avatar for havilah

IE 6...but I want it to work with IE 5+
Thanks

Member Avatar for Fungus1487

i dont think that png alpha values are suported in 5.01 i saw somebody make a hack around it. it was very nasty tho

Member Avatar for MidiMagic

I just made several divs with 1px borders of different colors, and nested them.

Member Avatar for eleni

please, somebody help me!! i would like to make shadow in my page!in all page!!right-left-bottom and in the corners!!

Member Avatar for Fungus1487

just take a look at this fellas source code and use it for top-left-righ+bottom ?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.