PDA

View Full Version : opacity not working in IE8



jarv
Feb 12th, 2010, 10:22 AM
hi, on my page I have a ID="homepage" which does not work in IE

CSS


#homepage { background-color:#FFFFFF; opacity:0.7; position:absolute; top:0; width:290px; clear:both; height:344px; overflow:hidden; padding:0 25px 0 15px;}


HTML


<div id="homepage">
<h2>Welcome to Francis Tate Marbleworks</h2><p>Lorem ipsum dolor sit amet, tempor incidunt ut labore et dolore nostrud exercitation ullam corpe atib saepe eveniet ut et repudi. Nam liber tempor cum soluta nobis.</p><p>Temporibud autem quinusd et aut delectus ut aut prefer endis doloril. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma.</p><p>Tempor incidunt ut labore et dolore nostrud exercitation ullam corpe atib saepe eveniet ut er repudi cum soluta nobis. Temporibud autem quinusd et aut delectus us aut prefer endis doloril. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma.</p>
</div>

_Aerospace_Eng_
Feb 12th, 2010, 10:27 AM
MS didn't implement opacity in IE8 so you will need to use the proprietary filter. You can use conditional comments if you still want your css to be valid.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#000;
}
#homepage {
background-color:#FFFFFF;
opacity: 0.7;
position:absolute;
top:0;
width:290px;
clear:both;
height:344px;
overflow:hidden;
padding:0 25px 0 15px;
}
</style>
<!--[if IE]>
<style type="text/css">
#homepage {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
}
</style>
<![endif]-->
</head>
<body>
<div id="homepage">
<h2>Welcome to Francis Tate Marbleworks</h2>
<p>Lorem ipsum dolor sit amet, tempor incidunt ut labore et dolore nostrud exercitation ullam corpe atib saepe eveniet ut et repudi. Nam liber tempor cum soluta nobis.</p>
<p>Temporibud autem quinusd et aut delectus ut aut prefer endis doloril. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma.</p>
<p>Tempor incidunt ut labore et dolore nostrud exercitation ullam corpe atib saepe eveniet ut er repudi cum soluta nobis. Temporibud autem quinusd et aut delectus us aut prefer endis doloril. Ut enim ad minim veniam, quis noris nisi ut aliquip ea comma.</p>
</div>
</body>
</html>