Shadows, CSS and IE 7/8

Hi

I'm a relative newbie to CSS and trying to complete a design by making a drop shadow on a container div called #allcontent.

It works beautifully in Chrome, Safari and Firefox on both Mac and PC. However, it doesn't on IE 7 or 8 (which the vast majority of viewers will be using). I'm looking for help on writing CSS that IE will listen to without breaking it for other browsers.

I'm including all of my CSS and the html for one page that uses this shadow.
CSS
 
@charset "UTF-8";
/* CSS Document */

body{background-color:#ffffff;font-family: Arial, Helvetica, sans-serif;margin:0;padding:0;}
h2{color:#00747a;text-align:center;}
h3{color:#00747a;font-size:14px;}


a img {border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;}
a {outline:none}

#allcontent{background-color:#00747a;width:1050px;border: 20px solid #00747a;margin-left:auto; margin-right:auto;min-width:250px; text-shadow:0 -1px 0 rgba(0,0,0,.8); box-shadow: 3px 3px 19px rgba(0,0,0,.8); -webkit-box-shadow: 3px 3px 19px rgba(0,0,0,.8); -moz-box-shadow: 3px 3px 19px rgba(0,0,0,.8);}

#logo{background-color:#ffffff;width:1050px;height:100px;margin-top:0;padding:0;display:block;vertical-align:bottom;}

#navbar{background-color:#ffffff;width:1050px;height:16px;font-size:14px;font-family:Arial, Helvetica, sans-serif;border-bottom:10px solid #00747a;}

#navbar a
{color: #00747a;background: #ffffff;text-decoration: none;padding-left:15px;}

#navbar a span
{padding-right:15px;}

#navbar a, #navigation a span
{display: block;float: left;}

#navbar a:hover, #navbar hover a
{color:#ffffff; background:#00747a;}

#navbar ul
{list-style: none;padding: 0;margin: 0;}

#navbar li {float: left;margin: 0;}


#sidebar {font-family:Arial, Helvetica, sans-serif; ; font-size:13px;  font-weight:bold; border-right:1px solid #00747a; padding: 0; margin-bottom:1em; color:#ffffff;width:225px;float:left;}

#sidebar ul {list-style:none; margin:0; padding:0;}

#sidebar ul li{margin:0; border-top: 1px solid #00747a;} 

#sidebar ul li a:link, #sidebar ul li a:visited {
display:block; padding:4px 4px 4px 0.5em; 
border-left: 10px solid #00747a; 
border-right: 1px solid #00747a; 
border-bottom: 1px solid #00747a; 
color:#ffffff;
text-decoration:none; 
background-color:#00747a;}



#sidebar ul li a:hover, #sidebar ul ul li a:hover, #sidebar ul li:hover a, #sidebar ul ul li:hover a
{border-left: 10px solid #ffffff; 
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
background:#ffffff url("../images/hover.gif") left center no-repeat;;
color:#00747a;} 

#sidebar .indent{margin-left:20px;} 

#sidebar .indent a:hover {margin-left:20px;border-left: 10px solid #ffffff; 
border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;
background:#ffffff url("../images/hover.gif") left center no-repeat;
color:#00747a;}


#main{margin-top:0px;margin-right:0px;margin-bottom:0px; margin-left:230px; background-color:#ffffff;font-size:12px;padding-top:20px; padding-bottom:5px;padding-right:5px;padding-left:5px;color:#000000;}
#main a:link{color:#024548;}
.superscript{vertical-align:super;}

#footer{clear:both;width:1050px;height:50px;background:#00747a;color:#ffffff;}


.centered{text-align:center;}
.blue {color:#00747a;}
.from{text-align:right;}
.tabledata{color:#00747a;margin-left:auto; margin-right:auto;}
.menu{text-align:left;}

Open in new window

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"><!-- InstanceBegin template="/Templates/bodypages.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>About ERLLC</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="../css/body.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
	<meta http-equiv="Content-Language" content="en-US"/>
	<meta name="Copyright" content="(c)2008, Engineered Resources, LLC."/>
	<meta name="Keywords" content="Systems Engineering, Engineered Resources, Project Managment, Program Management, Project Planning, program execution, Process development, SBA, engineering services, engineering staff augmentation, qwik risk, risk assessment, erllc, construction support, process planning, engineering support, government support, construction project, project streamlining"/>
	<meta name="Description" content="Engineered Resources, ERLLC, has experience providing long and short-term Consulting Engineering and Construction Project Services emphasizing Engineering/Construction Contractor services and Systems Engineering"/>
	<meta name="revisit-after" content="15 days"/>
	<meta name="classification" content="Engineering"/>
	<meta http-equiv="reply-to" content="erllc@erllc.us"/>
	<meta name="language" content="English"/>
	<meta name="doc-type" content="Web Page"/>
	<meta name="doc-class" content="Completed"/>
	<meta name="doc-rights" content="Copywritten Work"/>
	<meta name="robots" content="ALL"/>
	<meta name="distribution" content="Global"/>
	<meta name="rating" content="Safe For Kids"/>
    
</head>

<body>
<div id="allcontent">
<div id="logo"><a href="http://www.erllc.us"><img src="../images/logo.png" width="1050" height="100" alt="Engineered Resources"/></a></div>

<div id="navbar">
<ul>
<li><a href="index.html"><span>About Us</span></a></li>
<li><a href="../employment/index.html"><span>Employment</span></a></li>
<li><a href="../contact/index.html"><span>Contact Us</span></a></li>
<li><a href="../environmental/index.html"><span>Environmental Services</span></a></li>
<li><a href="../systems/index.html"><span>Systems &amp; Resources Integration</span></a></li>
<li><a href="../construction/index.html"><span>Construction &amp;  Engineering Support</span></a></li>
<li><a href="../index.html"><span>Home</span></a></li>
</ul></div>

<!-- InstanceBeginEditable name="templatesidebar" -->
<div id="sidebar">
        <ul class="menu"><li><a href="index.html">About Us</a></li>
       <li><a href="index.html">Company Overview</a></li>
    <li><a href="erllcway.html">The ERLLC Way</a></li>
    <li><a href="index.html#mission_vision_values">Mission/Vision/Values</a></li>
    <li><a href="contractvehicles.html">Contract Vehicles</a></li>
    <li><a href="mentor.html">Mentor-Protégé</a></li>
    <li><a href="customers.html">What Our Customers Say</a></li>
    <li><a href="experience.html">Company Experience</a>
    <ul><li class="indent"><a href="experience.html#nuclear">Nuclear</a></li>
    <li class="indent"><a href="experience.html#commercial">Commercial</a></li>
    </ul></li>
    </ul>
</div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="templatemain" -->
<div id="main"><p>Engineered Resources LCC (ERLLC) is an 8(a) small business enterprise with the capabilities and reach of many major American corporations. Over the past decade, we have established a strong reputation for excellence in providing management, consulting, and engineering services to government and private-sector clients. </p>
    <p>Our history, like many of our projects, is rooted in the U.S. Department of Energy, the National Nuclear Security Administration, its weapons production complex and prime contractors, and the Department of Defense. In recent years, we have expanded our scope to include a wide variety of commercial construction and engineering activities nationally and around the world.</p>
    <p>ERLLC provides short and long-term engineering and environmental services, with an emphasis on Success Staging. ERLLC's professional staff can provide project skills in the areas of Program/Project Management, Project Controls, Cost Estimating, Risk Management, Planning/Scheduling, Procurement, Contract/Project Administrators, Environmental Assessments, Quality, and various other technical specializations. The staff utilizes systems engineering methods as their foundation for approaching and executing all tasks (Problem/Opportunity Definition, Functional &amp; Requirements Analysis, Alternative/Decision Analysis, Verification &amp; Validation Assessment, Risk &amp; Opportunity Management, Interface Management).</p></div>
<!-- InstanceEndEditable -->


<div id="footer"><a href="../sitemap.html"><img src="../images/footer.png" width="1024" height="50" alt="footer"/></a></div>

</div>

<script type="text/javascript"> 
var $buoop = {vs:{i:6,f:2,o:10.01,s:3,n:9}} 
$buoop.ol = window.onload; 
window.onload=function(){ 
 if ($buoop.ol) $buoop.ol(); 
 var e = document.createElement("script"); 
 e.setAttribute("type", "text/javascript"); 
 e.setAttribute("src", "http://browser-update.org/update.js"); 
 document.body.appendChild(e); 
} 
</script> 
</body>
<!-- InstanceEnd --></html>

Open in new window


Thanks in advance!

Larissa
larissapAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

larissapAuthor Commented:
I should add that if you want to view the page it's at

http://www.erllc.us/newsite/about/index.html
SSupremeCommented:
IE simple doesn't  support this function.
SSupremeCommented:
The text-shadow property is supported in all major browsers, except Internet Explorer.
The box-shadow property is only supported in Opera. Firefox supports an alternative, the -moz-box-shadow property. Safari and Chrome support an alternative, the -webkit-box-shadow property. Internet Explorer doesn't support the box-shadow property.
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

larissapAuthor Commented:
Ugh... Is there any way to fake it?
larissapAuthor Commented:
I was aware that the code as written wouldn't support it. I'm just looking for an alternative way to get the same effect (without breaking the existing css for the other browsers)
SSupremeCommented:
Just found out that IE9 beta can handle it, but unfortunately there is no way to fake it, except using pictures.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
larissapAuthor Commented:
Thanks.... I'll keep that in mind. Sadly, I doubt many of the typical viewers will be using IE 9 for awhile (they tend to update their browser only when required.)

Larissa
LordALMMaCommented:
What you are using is called CSS3.

It't the newest version of CSS and browsers still do not fully support it.
As a general recomendation you should NOT use it for now, just for some tests and learning.

So, how to solve this?
There are several approaches but one would be to use a plain image for the shaddow effect.
Other would be to draw it using css and two div, one in front of the other (position + z-index on css).
However you must understand that using this second option would create a rectangular shaddow...

If you really need CSS3 and this drop shaddow, you can use a custom javascript to work with IE that would do this effect, while other browsers would simply use the css file.


It's not a "bug" from IE as many would say.
It's simply because CSS3 is quite new and browsers cannot simply go there and change everything (or else they would risk to loose compatibility with older pages).
That's what happened with Chrome when it was first lunch. And with Firefox. And with IE 9, that does support CSS3 (but is still unstable).

So, as I said, as a general recomendation, do NOT use CSS3. Change it to images and javascript for now. It's too soon to go straight into this and you might face many problems that you're not ready to accept due to this "simple" choice...
larissapAuthor Commented:
Thanks. As a general rule, I'm not using CSS 3.

With this shadow, however, I'm not getting undesired effects by any browsers- except for IE 7-8  just ignoring it. No other "undesired effects". FF, Safari and Chrome are all behaving. The typical viewer/user of this site is going to be on Windows, using IE 7 or 8. Typically, they wouldn't be using an alternative browser, except for the minority that also use FF....maybe Chrome if they are tech curious.

I'm cautious about new technology and compatibility but, in this case, I don't think I should kill the CSS 3.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.