Hi there hdjourdan,
opacity applied to the parent element will be also be applied to the child elements.
Personally, I would use "
rgba" instead and not worry about IE8 rendering, it will just be black, which is no big deal.
Have a look at this example...
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base href="http://hernanjourdan.com">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>LA CLE</title>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style type="text/css">
body {
margin:0;
background-image:url(LA%20CLE/background/wood3.jpg);
background-repeat:repeat;
background-attachment:fixed;
}
#container {
width:820px;
padding-top:135px;
margin:10px auto 20px;
background-image:url(LA%20CLE/LOGO/LOGO8-10.png);
background-repeat:no-repeat;
background-position:center top;
}
#grey {
padding:20px;
border:1px solid #000;
background-color:rgba(0,0,0,0.6);
box-shadow:12px 12px 12px rgba(0,0,0,0.5);
}
#content {
height:410px;
padding:20px;
background-color:#fff;
overflow:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="grey">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae
faucibus felis. Vivamus at metus eget eros consequat fringilla.
Quisque magna magna, laoreet eu tempus sit amet, fringilla at
tellus. Praesent felis tortor, scelerisque vitae fringilla
non, porttitor et lacus. Ut ut sapien nec quam tincidunt
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus
ac quam pellentesque lacinia quis sit amet augue. Fusce eu
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu
et mauris scelerisque tristique. Donec fringilla mauris dolor,
sit amet vulputate lacus. Nulla feugiat mattis nulla non
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim,
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat
massa sed congue. Sed eros nisl, volutpat ac dapibus quis,
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit.
Proin viverra, neque non eleifend vehicula, nulla augue gravida
felis, non fermentum lorem odio ac nunc. Aliquam pretium
scelerisque consectetur. Proin ultrices urna non magna interdum
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu
sodales cursus. Maecenas bibendum neque vitae orci mollis ac
vulputate ante auctor. Sed sodales odio id ante sagittis
faucibus.
</p>
</div><!-- end #content" -->
</div><!-- end #grey" -->
</div><!-- end #container" -->
</body>
</html>
coothead