Link to home
Create AccountLog in
Avatar of larissap

asked on

Shadows, CSS and IE 7/8


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.
@charset "UTF-8";
/* CSS Document */

body{background-color:#ffffff;font-family: Arial, Helvetica, sans-serif;margin:0;padding:0;}

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);}


#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

#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; 

#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;;

#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;

#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;}


.blue {color:#00747a;}
.tabledata{color:#00747a;margin-left:auto; margin-right:auto;}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><!-- InstanceBegin template="/Templates/bodypages.dwt" codeOutsideHTMLIsLocked="false" -->
<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=""/>
	<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"/>

<div id="allcontent">
<div id="logo"><a href=""><img src="../images/logo.png" width="1050" height="100" alt="Engineered Resources"/></a></div>

<div id="navbar">
<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>

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


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

Open in new window

Thanks in advance!

Avatar of larissap


I should add that if you want to view the page it's at
IE simple doesn't  support this function.
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.
Ugh... Is there any way to fake it?
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)
Avatar of SSupreme
Flag of Belarus image

Link to home
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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.)

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...
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.