www.webdeveloper.com
Results 1 to 3 of 3

Thread: Compatibility Mode Issues With CSS

  1. #1
    Join Date
    Mar 2006
    Posts
    73

    Compatibility Mode Issues With CSS

    Good day, all,

    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"?

    Yours,
    Dave

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    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

  3. #3
    Join Date
    Mar 2006
    Posts
    73

    Fixed

    Quote Originally Posted by holyhttp View Post
    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!

    Yours,
    Dave

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles