Tricky CSS background issue

Tricky CSS styling background issue in IE

[ivalue]

Hi
I've been reading up on all the topics regarding background differences in IE en Firefox etc. But I just can't solve this one on my own. Any help will be greatly appreciated.

I've got a sliding banner on the homepage which pulls a background image through css. Works in all browsers except IE. I must be overlooking something but I just can't locate the issue (loc: ivalue.be).

CSS code for HTML #slider:

#slider {
background:url("images/slider-bg.jpg") repeat-x scroll 0 0 transparent;
float:left;
height:370px;
width:949px;

Many thanks!

[SuzyUK]

Welcome to WebmasterWorld! ivalue

think you need to check your IE CSS files ;)

I checked in IE Dev Tools and can see that the #slider div CSS you show above is actually being overruled by CSS in the ie7.css file

here's what's in the ie7.css

#slider {
background:#c9c9c9;
background-image:url(../images/slider-bg.jpg) repeat 0 0;
display:block;
width:949px;
height:370px;
border:none;
}

specifically in ie7.css there is 2 background rules, the background shorthand the first one is working and is overruling the image part of the rule in the main css file (in shorthand if a property is not explicitly specified it is implicitly set back to the default)

it's not reading the second rule, which btw neither would FF if it saw it

anyway to fix, I don't think you need either as the only purpose appears to be to give IE a different background color.. but if you do actually want IE to have a different background color you should just use the IE7.css file to specifically overrule the "color" part of the background shorthand you have in the main file

e.g.

background-color: #c9c9c9

however I don't think you actually need that entire slider ruleset in a separate IE file... all other properties shown above are either unnecesary (a floated element automatically becomes display: block; and there is no borders involved in this div anyway) or are getting to IE via the main CSS and your inline styles -IOW it's doing nothing except breaking the background image at the minute ;)

[ivalue]

Thank you for taking the time to write your feedback. I really appreciate it. Been following Webmasterworld for a while but never posted before :|

Anyway, following your reply I concluded that the best thing to do is to remove the background rule in the IE7 specific CSS file. I'm seeing no background whatsoever? Am I forgetting something?

Many thanks in advance,
Jacob

[SuzyUK]

Jacob, no you're not forgetting anything..

this took me a bit to find, but have found something else which I don't know how to fix with CSS alone.. you may have to delve into the JS

The slider script, I presume is producing the container div code for those three divs which are nested inside the main #slider div - whatever is producing it is produciing inline styles (hence can't override them from a main CSS file!) anyway for IE only one of the properties that's being produced is background-color: #eff3f5.. it's that background color of those divs which is covering over the background image on your slider div.. there is opacity applied too, which the script is using for it's fade |I think.. but I don't think you need the background-color as you want it transparent so the slider div background shows through.. FF is not producing the background-color property hence it's transparent ..

the structure is
<div id="slider>
<div>..
<div>..
<div>..
</div>

it's the 3 nested divs which have the background-color hard-coded into them somewhere ;)

hope that helps, sorry can't delve into the script for you

[SuzyUK]

Jacob, before delving into the script.. try changing the main CSS for #slider to:

background:transparent url(../images/slider-bg.jpg) repeat 0 0; 

the script is picking up the inherited background color (from #pagewrap I think?) so specifically tell it that it should be transparent to see if that helps..

[ivalue]

Hey SuzyUK

Thanks again for the hard work :)
I tried adding that rule but it didn't work :|

I've looked through the 3 JS files it pulls. You're right, there is a background rule in there:

getBg(e){for(;e&&e.nodeName.toLowerCase()!='html';e=e.parentNode){var v=$.css(e,'background-color');if(v.indexOf('rgb')>=0){var rgb=v.match(/\d+/g);return'#'+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}
if(v&&v!='transparent')
return v;}
return'#ffffff';};$slides.each(function(){$(this).css('background-color',getBg(this));});};$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display='block';if(w!==false&&next.cycleW>0)

I have no idea how to change that.

[milosevic]

Wow that's some tricky code and beyond my skills.

What I would suggest is trying to give your external CSS a higher level of specificity.

So instead of just #slider, try #content #slider or #wrap #slider or any parent elements that have IDs

[SuzyUK]

Me either :o - but truth be told I wouldn't mess with it anyway if it's a plugin! I would try to make sure the existing libraries weren't in conflict and then make a working demo on a separate page

maybe someone from the JS community could look at it, try posting a message in the JS board referring them to this thread to see if they can see anything more obvious

I wonder if that's why there was a background color coded into for IE in the ie7.css (though that wouldn't help IE8?), perhaps there has always been a limitation with this particular script.. if it is a plugin? can you get help from the WP plugin author/community ...

anyway all the above aside.. no messing with JS for me so, this is working for me in tests..I can't quite get the positioning right as IE is out by a pixel but, see if the image works first.. if it does you might want to reduce the width of slider and/or slider div by a pixel to see what happens

in your main CSS file under the #slider section add this: (remove any other background rules that apply to slider)- check that image path ;)

#slider, #slider div {background: #c9c9c9 url(images/slider-bg.jpg) repeat 0 0;}

in the IE CSS files (all of them) remove or comment everything from the #slider rules except display:block, as I just remembered I think is an IE6 "toggle" fix.. but it does no harm to anything to leave it there anyway

basically here's what I've got working for IE all versions although this is the test just put the actual css, not the comments into to your existing ie.css, removing all references to #slider in ie6.css and ie7.css

<!--[if IE]>
<style type="text/css" media="screen">
 #slider {
display:block;
width:947px;
height:370px;
}

#sliderbottom {
height:34px;
}
</style>
<![endif]-->

don't really need the width/height but I'm still trying to see if I can get the script to pick up a different width for IE ;)

fingers crossed ;)

[ivalue]

Thanks for the suggestion Milosevic.
Tried it out but no luck - still gets overwritten :|

[SuzyUK]

What I would suggest is trying to give your external CSS a higher level of specificity.

So instead of just #slider, try #content #slider or #wrap #slider or any parent elements that have IDs

that's thought milosevic, might try some playing around with that ref the width issue, though the jquery script is picking up values from parent divs via inheritance, if there's no background-color applied to the #slider div itself the slides are picking up their color from the #pagewrap div - there also appears to be something in the script which negates the use of "transparent" as a value for background-color for IE only, which if I remeber does cause problems in IE7 downwards.. Once the script gets the style values it is then re-applying them as inline styles, else it would have an easy to override, my thinking on the above is becasue of the nature of ivalues background image it looks OK if it's also actually applied to the "slide" itself, then it doesn't matter that the script is applying a different background-color, the image is still on top of it

however I will try some specificity.. I think a lot of it has to do with "containing" elements (not wrapper/containers div but relative positioned things) does IE8 still have positioning related display problems?

anyway will try some specificity on the little blighters and see what happens..

[ivalue]

SuzyUK > You nailed it! Wow. You can't believe how happy that makes me, I've been cursing on that for months (since 60% of visitors uses IE).

I can't thank you enough! Thanks a lot for all the effort.

[SuzyUK]

yippee, and you're welcome! a nice little challenge for the brain cells

your 1px width difference applies across all browsers and can be fixed by changing #slider div width to 889px and removing the unnecessary width height in the IE file

you had 890width + 60px padding so need to reduce one of them by a px to fit the actual width :)

[ivalue]

Yes! Done deal - fixed that width as well now. It's perfect. Thanks a mill again. Is there someway to thumb you up in this forum ;)