asked on

Bg Image not Showing in Container Div

Hi! I have a container-div with 2 divs inside it. The 2 divs are floated left and right. So what I get is 2 columns inside a container div. This is fine and works. What I want to do is add a bg image to the container to extend from top to bottom. In Firefox, this works just as expected, but in IE7, the bg image only shows at the top of the container-div and does not extend down.

Basically, what I want is background repeat-y, but IE displays it as if it were repeat-x.

Hope this makes sense...

I think I may be missing something as I've never come across this problem before ... ??

Julian Matz

ASKER

Ok, I was able to fix this by placing a non-breaking space at the bottom of the container div... I just find it strange that I never encountered this issue before... Maybe a bug in IE7 ??

<div id="main-content-wrapper">

<div id="mcL">
<h1>TITLE</h1>
<p>Text.................</p>
</div>

<div id="mcR">
<h1>Featured Property</h1>
<p class="c"><img src="property/prop01.jpg" width="160" height="120" alt="Cyprus Property" /></p>
</div>

<br class="clr" />

 

</div>

kiere

I am pretty sure this falls under the "Holly Hacks" for IE. When using CSS with IE, you need to add a height: 1%; to any div with nested floats and a display: inline; to each div that is floated and has margins greater than zero:

So, if your container just has floats, but ike this:

#main-content-wrapper {
height: 1%;
}

#mcL {
display: inline;
}

#mcR {
display: inline;
}

This article may help you with these IE problems:
http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/

And this one:
http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

I find that IE 6 and 7 do things a little differently so I prefer using "conditional comments" to put my IE 6 and 7 patches (hacks) in different files so my "clean" CSS can live in my main CSS file.

ASKER CERTIFIED SOLUTION

kiere

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Matz

ASKER

Thanks, kiere. I haven't tested this any further yet, but I'm sure you're right. Thanks!