IE 6 and 7 background inheritance problem, how do I solve this?
- by Evilalan
When I'm trying to create a rounded shaded box it works fine on FF and IE8 but on IE6 and IE7, any div inside the box gets the last background but if you set that all divs on the level where there should not be a background have background:none it doesn't show any background on the level that comes before
*The code is pointing to live images on Image Shack so you can save and run that it will work normally on Firefox but you can see what happen on IE6/7.
Also I can't give a specific class for the intens inside the containet "background" because it's a CMS that I'm trying to style!
the code:
<!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>Problem With IE6 and 7</title>
<style type="text/css">
* {padding:0px;
margin:0px auto;}
body {font-family:Verdana, Geneva, sans-serif;
color:#666;
font-size:14px;
text-align:justify;}
.background {width:300px;}
.background div {background:url(http://img6.imageshack.us/img6/5763/76022084.png) repeat-y;}
.background div div {background:url(http://img253.imageshack.us/img253/444/97936614.png) top left no-repeat;}
.background div div div {background:url(http://img13.imageshack.us/img13/3667/45918712.png) bottom left no-repeat;}
.background div div div div {padding:15px;
background:none;}
</style>
</head>
<body>
<div class="background">
<div><div><div><div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut sagittis nisl. Nullam facilisis volutpat metus eu semper. Sed eleifend, mi sed rhoncus interdum, neque quam pellentesque diam, in tincidunt metus nulla in ligula. Donec dui tellus, ultricies vel venenatis vitae, aliquam et purus. Cras eu nunc urna, in placerat quam. Pellentesque lobortis pellentesque orci, a tempus diam consequat nec. Aliquam erat volutpat. Aliquam laoreet blandit tellus in mollis. Duis tincidunt, justo sit amet lacinia ultrices, nibh justo venenatis erat, non commodo libero ligula quis ante. Cras eget nulla nec est accumsan porttitor at euismod nulla. Integer pharetra lacinia malesuada. Donec commodo vestibulum est, eget pellentesque velit volutpat nec. In id erat nec ipsum consequat convallis id non libero. Sed dui nisl, molestie vel dignissim sed, mattis in est. Vestibulum porttitor posuere ipsum, id facilisis libero dapibus et. Fusce consequat malesuada nulla, vitae faucibus neque consectetur eget. Curabitur porta dapibus justo dictum porttitor. Curabitur facilisis faucibus diam, vel dapibus ipsum ornare sed. Vestibulum turpis nulla, facilisis condimentum sodales sed, imperdiet placerat mi. Cras ac risus ipsum. </p>
</div></div></div>
</div><!-- class background end here -->
</body>
</html>
