Wrapper image not displaying / IE6 background positioning

[trekk82]

My div "#content_middle" has a background image applied. Inside this div there are two nested, floated divs. The background displays in the correct position in all browsers except IE6 where it gets pushed to the right, and starts behind the nested "#content_middle #rightcolumn". If the first nested div "#content_middle #content" is empty, this does not happen, but as soon as I add anything to this div (text, other divs etc), the background gets pushed to the right, behind the #rightcolumn div. Any help with this would be greatly, greatly appreciated... I'm going insane!

Here is my css (for the relevant section):

#content_middle {background:url(/images/bg_content.png) repeat-y top; padding:0 10px 0 10px;}
* html #content_middle {background:url(/images/bg_content.jpg) repeat-y top; padding:0 10px 0 10px;}
#content_middle #content {float:left; width:660px;}
#content_middle #rightcolumn {float:right; width:270px; padding-right:20px; color:#fff;}

And my html (for the relevant section):

<!--begin content middle -->
<div id="content_middle">

<!--begin content -->
<div id="content">

<!--end content -->
</div>

<!--begin right column -->
<div id="rightcolumn">

<!--end right coloumn -->
</div>

<!--float fix to stretch background -->
<div class="float_fix"></div>

<!--end content middle -->
</div>

[SuzyUK]

Welcome to WebmasterWorld!

first you're using an IE6 and below hack which is actually doing nothing ;)

#content_middle {background:url(/images/bg_content.png) repeat-y top; padding:0 10px 0 10px;}
* html #content_middle {background:url(/images/bg_content.jpg) repeat-y top; padding:0 10px 0 10px;}

the * html part only targets IE6 and below but the CSS rule that it is in identical to the rule above it, so it's doing nothing, and while that's no help to your question I just thought you might like to know, I hate seeing hacks for no good reason..

you might or might not be giving us all the information we need. If you're checking in IE6, what's the Doctype, and are there any margins involved in this?

My first instinct based on the supplied code is that you should try removing all comments <!-- --> from your code and try it again, if that works, you are indeed a victim of an IE6 and below bug, but if so it's easily fixed.

if it doesn't work then try to produce the smallest example code possible which shows the problem , because I'm not seeing right now with the code above, and am just guessing

Suzy

[trekk82]

Hi Suzy,

The IE6 hack is actually calling a jpg image, rather than the png image. I did try removing the comments... no luck there I'm afraid :( Whilst there are some margins applied to other parent divs, they don't seem significant enough to be causing this issue...?

The doctype is XHTML 1.0 Transitional

[SuzyUK]

oh yes you're quite right.. my bad jpg v's png :o

the comments would have been the easy move, sorry that one didn't work

as for your margins not being significant, they *could* be. at some point in the parent/ancestor structure (AND AS FAR AS IE IS CONCERNED) you have to have a what I call a solid wrapper structure i.e NO margins

margins can cause bugs on their own, especially in an IE environment, and if margined divs(elements) are not nested inside 'stable' divs then they too can cause IE problems, so, If you can, make sure your very outer most divs have no margins at all

and then if you are margining inside them, try to make sure that padding would not do the job just as well

it's hard to guess at it all, sometimes it's just tweaking the terminology (especially seeing as it's a background image) try get more explicit with your background positioning

like I said if you can reproduce on smaller scale, enough to post, it might ring a '6' bell with osome others too

[trekk82]

Thanks for your help Suzy, I do appreciate it :) I removed all the margins from parent divs and the problem persists. I am now having a breakdown :( !

I will try to reproduce it on a smaller scale...

[SuzyUK]

ahh.. and I too managed to get it to replicate, it's the clearing div, sorry should've tried that last night too

when I tried it, .float_fix, just with clear:both I saw the problem

added: width: 100%; to it, problem fixed. If width is no use in your layout, you could try another haslayout property i.e. zoom: 1;

.float_fix {clear: both; width: 100%;}

[edited by: SuzyUK at 7:57 am (utc) on April 30, 2009]

[trekk82]

OMG! I LOVE you Suzy :-) I originally had {clear:both; display:block;} so I was skeptical that using width:100% would work - but it did! Seriously, I haven't been to bed trying to figure this out all last night and all today (it's now 6pm!) I am so very thankful XOX

[SuzyUK]

Cool! and you're welcome

sorry I didn't try that last night as I could've helped you get some sleep earlier :o - It's just I don't like to use 'clearing' divs any more and forgot about their contribution to IE6 hasLayout problems

I originally had {clear:both; display:block;}

display: block; is not an IE hasLayout=true triggering property which is why it didn't work. A div is by default display: block; and IE *should* clear it properly, however if it's an empty div it sometimes needs that forced "hasLayout" trigger to tell IE it is actually part of the layout!

Anyway glad it helped & Night Night :)

[swa66]

To fix IE worries, one thing to always try is to throw about a few hasLayout triggers.

I usually use a zoom:1 on various selectors in the IE conditional comment.

HasLayout that way has solved probably about half of the IE troubles I encounter on real sites.

That said: I'd avoid parser hacks, and even adding innocent looking code to the main CSS. Let's remember IE8 is out there and does not need to have this extra stuff applied. I'd suggest to use a conditional comment instead (once you have slept that is ;) )