Broken CSS div element in main body using IE 7

HTML & CSS
1

Hi there

For some odd reason in IE 7 I have this problem where the page breaks at a certain height. It then shows part content of the 3 columns and then it shows another element below them. It should look like this as it does in FF and other browsers but not in IE7
http://test.workingwebsolutions.co.nz/packages.aspx

This is what it looks like in IE7:
http://www.screencast.com/users/Feliciaf/folders/Jing/media/465482c0-d051-46b3-804e-909a54ff21a0

Can anyone enlighten me as to what I have done please?

Also, on another problem and the same template…

The background column image will only go to 600px which is what I have set it at but I would prefer it be 100% of the longest text column. I have tried the height hack but this doesn’t work in FF. I have made the background image part of the wrapcenter element as this is where all the content sits. The image is here:
http://test.workingwebsolutions.co.nz/Data/Sites/1/skins/wws-template-home/wrapcenter-bg.png

Any ideas here would be greatly appreciated - thanks so much

2

Hi, I’m assuming the first link is what you want us to debug. I’m getting an error :slight_smile:

XML parsing failed

XML parsing failed: syntax error (Line: 87, Character: 42)

Reparse document as HTML
Error:invalid entity reference
Specification:http://www.w3.org/TR/REC-xml/#NT-EntityRef
84: // content and whether the Full size option is on or not.
85: function setUpResizingUI()
86: {
87: if ( boundsWidth > originalWidth && boundsHeight > originalHeight ||
88: document.getElementById( resizeAreaId ) == null )
89: {
90: // The content area is larger than the content, no scaling is needed.

3

Hi there
Yes it is the first link that is the problem link and in IE 7, but I don’t really understand what the above error means and I don’t know how to fix it. I have done an xhtml validation and this seems fine. Are you able to help me understand the above error and would this be the issue perhaps for the center content breaking?

4

Hey there again Ryan. Whereabouts did you go in W3C to find this error? Also, humble apologies but the error is happening in IE8.
Thanks

5

I just loaded the page and the page wasn’t working for me. Instead of displaying hte page it displayed that message :slight_smile:

6

Hi,

If you want the image to repeat to the bottom you would need to make sure you clear the floats.


#wrapcenter{o[B]verflow:hidden[/B]}

If you need visible overflow then use one of the other clearing methods (see faq on floats).

I didn’t see a broken layout in ie7 or ie8 so wasn’t sure what you meant.

7

oh wow - I haven’t experienced that - yet. Thanks though.

8

I fixed the broken part of the page. It was the height element that was doing that. I took it out.

But putting overflow: hidden fixed the FF problem with the background image - THANK YOU VERY MUCH. Phew, I was starting to worry there. AND I should’ve known this. Thanks again