SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question [Browser Mode vs Document Mode] - ?s on using IE Dev tools to test for IE7-9

    Whats good Sitepointers?
    I have a large, old, and rather complex site that I've inherited which I'm slowly working on renovating. I've made some fairly dramatic CSS and HTML changes to the UI - which need to work in all modern browsers *plus* IE 7-9.

    In using IE Web Dev Tools (in IE10) I'd like to get some input on the best way to test for older versions of IE, and the Browser Mode and Document Modes are a bit confusing. What is the best way, or combination of Browser & Document Modes to test for each version of IE?

    Here is the current Doctype and meta info:


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        
    Different combinations of browser and doc modes render differently. What is the best combination to use for each version of IE with the code snippet above?

    Thanks!

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It depends on how long you expect it to take to complete transitioning from HTML 3.2 to HTML 4. It has been 16 years now since HTML 4 became a standard so most sites ought to be close to completing the transition by now and once all the HTML 3.2 tags have been replaced you can switch to using the HTML 4 strict doctype.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    seattle.usa
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can appreciate that Stephen, and thanks for responding! Ideally I'd love to switch to an HTML5 site... alas, that's not going to be possible with this particular site. I'm still unsure about the best way to test legacy versions of IE inside of IE Dev tools using Document and Browser modes... Or perhaps there is something I'm missing altogether?

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Hi GOLGO-13,
    "Ideally I'd love to switch to an HTML5 site... alas, that's not going to be possible with this particular site."
    This doesn't mean you cannot use the html5 doctype (<!doctype html>), which is backwards compatible and is always the html-strict (pure standards) mode; i.e. as long as you don't use the special htlm5 tags and features it will work in all IE-versions above IE5.5.
    As far as I know, the following things are happening.

    For the best cross-browser results a strict doctype is recommended: the html5 doctype or the strict variants of html4.01 or xhtml1.0 (see here).

    If this is impossible in your case (too much work or other ways; f.i. use of the target attribute ), you can use the XHTML 1.0 Transitional variant as well.
    • With setting the html-validator option (by hand) on the strict doctype, you can try to get the code as much strict as possible: that doesn't hurt.

    "IE=edge" tells Internet Explorer to use the highest rendering mode available for the version of IE of the visitor: that will be o.k.

    All this will be the "Document Mode". Once chosen, you have nothing to do with it.

    With the "Browser Mode" button you can test (simulate) the results as if it was an older IE-version.
    • If something is not supported in a certain IE-version (for example a css rule), you can try to find a workaround and make a Conditional Comment to serve this version.

    Some more info at MSDN: Testing sites with Browser Mode vs. Doc Mode

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,532
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by GOLGO-13 View Post
    Whats good Sitepointers? What is the best way, or combination of Browser & Document Modes to test for each version of IE?
    Unfortunately, the browser modes don't replicate earlier version of the browsers very well at all as they miss a lot the important bugs in those earlier versions. It's ok as a rough guide but can't be relied on 100%.

    I use the browser mode as a quick check but then I also use ietester to check the css rendering as it is 99% accurate for css although its crashes a lot but just starts up again with no problem. For better testing I keep IE7 on my old laptop so it runs natively and IE8 on a spare computer (I run ie10 on my main computer). These days though we are very close to dropping support for IE7 and under so things are becoming easier.

    Some people like to load Virtual machines so that they can run multiple browsers but even then I have seen them give incorrect (different) results because the versions they install aren't the same as most people have with all the updates and fixes applied.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Just to note, nothing about a Virtual Machine would necessarily prevent one from accepting updates. However I personally have disabled Windows updates simply to preserve my browsers (IE7 doesn't remain on your machine if you allow complete automatic updates, MS wants you to upgrade to 8, and so on).


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
  •