views:

150

answers:

5

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>
A: 

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

oezi
it doesn't work, it's the same as before, is there a way for the background not to be passed the child element? or to use background:none in the child element without erasing the background from the parent? I hate IE
Evilalan
A: 

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}
akamike
Tried and as long as you have background-image:none in the last div it simply vanish with the background of the other divs... it's like what you define in the last div overrides everything that comes before it, if that was simple HTML I could use a diferent class for each div but that is not the case, I can't change the HTML only the CSS
Evilalan
This is quite odd, but that's IE for you! I may give this another look and see what I can find.
akamike
A: 

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

puppybeard
I'm trying to follow Andy's rule to never use !important, I don't know if that can solve the problem, but it's not really an option for me
Evilalan
A: 

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); }
DisgruntledGoat
My bad, spent all that time writing about adding classes but missed the part where you said it wasn't possible. BTW if you're using Joomla (which this looks like) then it's certainly possible to change the code and add classes, look up template or module overrides.
DisgruntledGoat
Just out of interest, how can you tell that this "is" Joomla?
Neurofluxation
@Neuro... Because Joomla is the only CMS that has code this bad ;) Seriously though... Joomla does use this same code for all its modules by default, to style rounded corners. See the left column on http://demo.joomla.org/1.5/
DisgruntledGoat
@ThatUnhappyGoat - Gotcha!
Neurofluxation
Yep it's Joomla! Well I'm not a PHP coder so for me to create core overrides it's kinda complicated
Evilalan
Do you know a place where I can get a working override with this function? I have the $29,99 overrides from JoomlaEZ but this prevents compatibility as long as a div is inside the module position, how much would it cost for a PHP/Joomla coder to create a class based module rounded corners with 4 and 8 divs?
Evilalan
+1  A: 

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

Neurofluxation
That doesn't work if there are more nested divs in there, because every div after the third level will have the `45918712.png` image as the background.
DisgruntledGoat
I see you're point. To be honest, OP should't use DIVs within that nested block. Stick to display: block; elements :)
Neurofluxation
Well I have no choice in that matter it's on the CMS. removing the "background:none;" is the first CSS instinct I guess!
Evilalan