I am afraid I cannot share a working URL or sample code for this one; I'm working on a proprietary site for a client. I am also unable to replicate in an environment in which I build sample code from the ground up. Rather, I'm being forced to use code supplied by my client and have to tweak it to make it work. Throwing it all out and starting over is not an option and since I didn't build it, initially, I've no idea why certain things are coded the way they are.
Believe me: I want to do this from scratch ... this is real spaghetti-code.
What I would like to know is if anyone here has heard of this general problem and if there are any approaches I could use to find fixes and work-arounds.
PROBLEM: The site displays just fine in Firefox, Safari, Chrome, IE8, and IE9. When in IE8 or IE9, if I enter "Compatibility Mode", the layout shifts and becomes slightly skewed and broken. Z-indexes don't seem to work properly, background image positioning seems off, and some heights seem broken.
QUESTION: Has anyone heard of this or found ways to address/target CSS interpretation bugs that only appear in "Compatibility Mode"?
Try adding <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> right after the <head> of your HTML document.
The layout shifts in IE are mostly caused by padding and default margins.
Try spotting out the main layout containers and set all horizontal padding values to 0.
If floating is involved then set the horizontal margin to 0 on the side where the container is floated to.
I would create a ie.css file where to put all those css rules specific to IE hacks/tweaks, use conditional CSS statements to affect specific IE versions
Try adding <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> right after the <head> of your HTML document.
The layout shifts in IE are mostly caused by padding and default margins.
Try spotting out the main layout containers and set all horizontal padding values to 0.
If floating is involved then set the horizontal margin to 0 on the side where the container is floated to.
I would create a ie.css file where to put all those css rules specific to IE hacks/tweaks, use conditional CSS statements to affect specific IE versions
Thank you for this advice; I've implemented the <meta>-tag fix and things are working pretty well. Much appreciated!
Reply With Quote
Originally Posted by holyhttp
Bookmarks