Compatability view screws my layout

HTML & CSS
1

i’ve had an annoying bug come up with a site i’ve just designed (with the help of people here)

most of the time its fine, but when the sites being displayed on smaller screens (1024x768) that have Internet Explorer in ‘Compatability View’ it screws up. the 2 screenshots below show what happens

any suggestions most welcome

[ i’m wondering whether there’s some way of testing whether the user is using IE in Normal/Compatibility View & take some kind of action. though how to do this & what kind of action to take i don’t know ]

2

Compatibility view is an attempt to show you how your site would look in older versions of IE. So this really means that your site is breaking in older browsers. There are ways of targeting older versions of IE with “conditional comments”, but it’s better first to see if there’s anything that can be improved in your code to obviate the need for such hacks.

3

Hi,

Compatibility view tries to emulate ie7 standards mode which it does but not perfectly. Your layout is therefore most broken in IE7 also. If you are triggering compatibility mode yourself then I wouldn’t bother with it but if its being tripped automatically then it may be recovering from a fatal script error.

It seems to be something to do with your screen width script and I believe that IE gives a different value for width which may be why there is an overlap as IE gives a smaller value. Try disabling the javascript and see if the page works ok and then you can narrow the problem down. I would like at $(window).width()) first to see if you are getting wrong information that may affect your layout.

The overlap on the footer is easier and you need to pad out the bottom element because of the sticky footer. Other browsers are automatically placing the footer below but IE7 needs to be padded out by the height of the footer.
e.g.


*+html #wrapper{padding-bottom:77px}

I couldn’t get a local copy working properly with all those scripts but in the basic version I got working there was no overlap of the right column in IE7 so it does seem to be the script issue or the CSS files that your are swapping.

4

You could always set the IE edge meta tag to avoid the drop into compatibility mode although its not usually recommended.


<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

It will allow you time to debug and fix the original problem while ensuring ie9 is broken. Once you have identified the problem you can remove the meta tag.

5

here’s a screenshot of the page when i disable scripts (IE7 Compatibility mode, 1024x768px)

does this help narrow down the problem?

6

The width of the page is fine without the script so it points to the script as the issue.

The only other problem in the screenshot is the sticky footer which I have already given you the code for above. IE7 needs a spacer when you use the negative margin to drag the sticky footer up (in my examples I reverse this process and drag the layout up and then soak up the negative margin in the header but I believe your multiple backgrounds made this awkward).

7

thanks for all the help - have plenty to go on now. will start by targeting a few additional rules for IE7 & Safari (cos it also screws up on the Ipad too apparently)

hopefully a solution won’t be too unforthcoming

8

Good luck :slight_smile: Shout if you get stuck but this was awkward to test locally as I couldn’t get all the scripts working and the page was fine without them.