Hi all,

 

I've read a few forum entries over the net trying to figure out why this is happening but can't seem get a specific answer. I'm building a website with a content area that grows with the content, so it has a top, a middle, and a bottom. I've used the following css with the middle content:

 

.contentMid {
background-image: url(../images/contentMid_bg.gif);
background-repeat: repeat-y;
}

 

Only problem is, the gif won't repeat-y on IE7! It works fine on FF and IE6 & IE8. Also, I've used this technique on previous sites and it worked fine.

 

Can anybody please help? site is Test Site

 

Cheers,

 

Jon.

.contentMid which has the background image has a child div #contentLeft with float: left and floated elements have no height so the parent div doesn't have any height (except that Firefox seems to guess and obviously the text shows but as far as IE is concerned, the text is hanging down from the top of the nil-height div. It's one of those oddities about coding. There are several methods, one is to put an un-floated div with no height at the bottom of the parent after the floated element, but it's easier here to use another method, add overflow: auto; to the parent (don't ask me how it works, but I've tested it with your code):-

.contentMid {  overflow: auto;
background-image: url(images/contentMid_bg.gif);
background-repeat: repeat-y;
}

Fixed it! Simply needed to add height 100% to my CSS.

 

.contentMid {
background-image: url(../images/contentMid_bg.gif);
background-repeat: repeat-y;
height: 100%; <-----
}

 

Plus some minor adjustments to margins/padding for IE only.

 

Thanks for looking at my post anyway- i hope this can help people with similar problems.

 

Jon.

That's another way, but the two methods I gave are more common as height: 100% can have odd consequences. 100% of what? It's taking 100% of the height of its parent which works in your case but it might be too much with another page code.

That's another way, but the two methods I gave are more common as height: 100% can have odd consequences. 100% of what? It's taking 100% of the height of its parent which works in your case but it might be too much with another page code.

 

 

Thanks for your advice Wickham. I've gone with your overflow option. I usually use the following code when trying to force a parent div around two floated child divs. It normally works, but this time it didn't.

 

<br class="clearing" />

 

I have a .clearing class is my CSS:

 

.clearing {
line-height: 1px;
margin: 0px;
padding: 0px;
clear: both;
}

 

This normally makes the parent div clear the floated ones if I place the above html just before the closing parent div.

 

I appreciate your advice.

 

Jon.