Background image repeat and Height of container div only works in IE6 & IE7?

HTML & CSS
1

Hi everybody,

I have searched all over and tried many things to fix this but I’m just not sure whats going on here -

I should mention I have only been using CSS for not very long.

Basically I have got a wrapper then a container then a content container then a content div!!

in the content div I’ve got three divs that are 3 columns.

The content container div contains the background image for the content.

And the background image does not repeat down unless i specify a height.

I need it to repeat based on content as every page is different

(But it does work fine in IE6 and IE7!! weird, thats never happened before)

It only repeats if I put a bit of content outside any of the column divs.

but even then other issues arise :frowning:

Any help is greatly appreciated

2

Glad it worked out :slight_smile:

There are other ways to contain your floats so you might want to learn about them.

http://gtwebdev.com/workshop/floats/enclosing-floats.php

You can’t always use overflow:hidden; because it’s main job is to clip anything that hangs out of the parent. There are some times when you want something to hang out intentionally and then you need to resort to other methods.

3

Great - I’ll check it out right now :slight_smile:

Thanks for your help.

I am tired of being a noob.

Time to take action

4

Dude! I tried it now and works perfectly, thanks so much.

5

Okay, I was just using #wrapper as a generic example.
Did you set overflow:hidden on your “content_container” div?

If you did and it is still not working then it is time to post a link to your page or post some code (html & css)

6

Basically I have got a wrapper then a container then a content container then a content div!!

in the content div I’ve got three divs that are 3 columns.

The content container div contains the background image for the content.
Hi, Welcome to SitePoint

It sounds like those three columns are floated and that you have a width or something else on the wrapper that has tripped haslayout in IE.

IE will automatically (incorrectly) contain it’s floats when haslayout is tripped. Modern browsers need to be forced to contain their floats.

That is most commonly done with the overflow property. It forces the parent div to search for all it’s children and then it wraps them up and expands with them. Floats are removed from the page flow so the parent does not know they are there unless you force it to look for them.

[B]#wrapper[/B] {
[COLOR=Blue]overflow:hidden;[/COLOR] /*contain child floats*/
}
7

Thanks for the response and the welcome :slight_smile: -

Um ok,

Sorry - please bare with me

Yep, there is a width set for the wrapper. And yes the 3 columns are floated

I placed the overflow hidden code you posted but the “content_container” div background image still does not repeat behind the content in FF - Safari, Chrome

and IE8.

But still looks ok in IE6 and IE7?