SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    compatability view screws my layout

    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

    homepage_1280x1024.jpghomepage_1024x768.jpg

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    *+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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You could always set the IE edge meta tag to avoid the drop into compatibility mode although its not usually recommended.
    Code:
    <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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's a screenshot of the page when i disable scripts (IE7 Compatibility mode, 1024x768px)

    homepage_1024x768 - disabled JS.jpg

    does this help narrow down the problem?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lancsDavid View Post
    here's a screenshot of the page when i disable scripts (IE7 Compatibility mode, 1024x768px)

    homepage_1024x768 - disabled JS.jpg

    does this help narrow down the problem?
    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. #7
    SitePoint Enthusiast
    Join Date
    Nov 2011
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lancsDavid View Post
    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
    Good luck 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.


Bookmarks

Posting Permissions

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