IE 6 and 7 background inheritance problem, how do I solve this?_问答_开发者

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!

Added: CMS is Joomla

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 fauci开发者_StackOverflowbus 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>

wave you tried to use .background > div > div and so on? by using > you are only applying that style to a direct child.

Have you tried using more specific properties, such as background-image and background-position? It's a bit verbose but might be enough to override the backgrounds more effectively.

.background div {background-image:url(http://img6.imageshack.us/img6/5763/76022084.png); background-repeat:repeat-y}

.background div div {background-image:url(http://img253.imageshack.us/img253/444/97936614.png); background-position:top left; background-repeat:no-repeat}

.background div div div {background-image:url(http://img13.imageshack.us/img13/3667/45918712.png); background-position:bottom left; background-repeat:no-repeat}

.background div div div div {padding:15px; background-image:none}

This is a bit of a logical nightmare.

Have you tried using !important already?

eg:

.background div div div {background-image:url(http://img13.imageshack.us/img13/3667/45918712.png) !important; background-position:bottom left !important; background-repeat:no-repeat !important;}

Better written as:

.background div div div {background:url(http://img13.imageshack.us/img13/3667/45918712.png) no-repeat 0 100% !important;}

Firstly I would suggest putting classes on each div and targeting them directly. (Note you have a div missing in your markup, though fixing that doesn't fix IE).

<style type="text/css">
  .background .sides { /* side image */ }
  .background .top { /* topimage */ }
  .background .bottom { /* bottom image */ }
  .background .inner { /* padding etc - no need to override background */ }
</style>

<div class="background">
  <div class="sides">
  <div class="top">
  <div class="bottom">
  <div class="inner">
      <p>Lorem ipsum...</p>
  </div>
  </div>
  </div>
  </div>
</div>

Alternatively, you could use a transparent gif for the last div. I tested with one I found on Google Images and it works for me in IE7 (I don't have access to IE6):

.background div div div div { padding:15px; background:url(http://1stforcrafts.com/images/button_transparent.gif); }

Well, I have got it to work in IE6 as per my code below, try this:

<!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; }
</style>
</head>
<body>

<div class="background">
  <div>
    <div>
        <div>
            <div>
                <p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p><p>Lorem ipsum...</p>
            </div>
        </div>
    </div>
  </div>
</div>

</body>
</html>

[EDIT] - I realised you didn't want CLASSES on your DIVs - So I removed them, code still functions in IE6/7/8/9 and FF/Chrome etc

*I published the browser test results for you: http://dch.litmusapp.com/pub/ed402a3 * Don't say I don't do anything!

-Neuro