Have Geek Brain

IE 6 and 7 background inheritance problem, how can I solve this?

When I try 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 all divs on a level where it shouldn't be in the background there is a background: neither one of them does not show the background on the level that precedes

* The code points to live images on Image Shack, so you can save and run that it will work fine in Firefox, but you can see what's going on on IE6 / 7.

Also, I can't give a specific class to intensify inside the "contain" background, because this is the CMS 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 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>
+2


a source to share


5 answers


wave have you tried .background > div > div

and so on? using >

, you are applying this style to the straight child.



0


a source


Have you tried using more specific properties like background-image

and background-position

? It's a little verbose, but might be enough to overlap the background 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}
0


a source


This is a bit of a logical nightmare.

You have already tried it! important?

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

0


a source


First, I suggest putting classes in each div

and customizing them directly. (Note that the div is missing from your markup, although the fix 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 can use a transparent gif for the last div. I tested one of these that 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); }
0


a source


Well i need it to work in IE6 according to 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 realized that you don't want CLASSES on your DIVs. So I removed them, the code still works in IE6 / 7/8/9 and FF / Chrome etc.

* I posted the browser test results for you: http://dch.litmusapp.com/pub/ed402a3 * Don't say I'm not doing anything!

-Neuro

-1


a source






More articles:


All Articles