Whenever I do a layout similar to this that has a outer wrapper
stretch 100% horizontally, and inside a div or a selector that has a
background image, with absolute position, the image always not showing
up in IE:
<div id="hdr-wrap"> <!-- 100% width - -->
<div id="hdr"> <!-- fix width 960px -->
<div id="logo">floated element.</div>
<h1>floated element.</h1>
<div id="absolute-position">background image with absolute position</
div>
</div>
</div>
I'd been having this issue for a while with a number of sites and have
always managed to solve it by changing absolute position to relative.
Here is a site I was working, the background image is decorative and I
can't use relative position this time because this resulting the menu
get pull down in both IE 6 and IE7 (probably can be fixed but I rather
not to bother with any hack), thus unable to solve it.
Was thinking maybe the overflow in #hdr causing it, so I removed it
and inserted extra clear:both div in markup, but this wasn't the
culprit as background image still not showing up. Was pretty desperate
and annoying because I had ridiculously spent a few hours trying to
fix this. Out of desperation I decided to thrown in extra div thinking
it's likely a fruitless attempt, but it works.
There are times I thrown in extra div to wrap floated elements to
prevent potential issues especially in IE6 when I know end-user is
going to update the site, but I never used three div before and never
occur I needed such excessive wrapping to make IEs behave. That being
said, I am not considering adding the third div wrap is a hasLayout
fix, or is it and that Ingo Chao and Georg have documented somewhere?
And can you explain why it's behaving this way that it needs three
divs wrap?
Two divs wrap - background image not showed up in iE6/7
http://lotusfromthemud.com/gbtv/products.html
Three divs wrap - background image showed up
http://lotusfromthemud.com/gbtv/products-1.html
Checked, IE8 shows no such issue.
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
