1 Reply Latest reply on Feb 24, 2010 10:00 AM by mhollis55

    Internet Explorer Issue with IE6

    peter@condons.demon.co.uk Level 1

      I have a website and am new to dreamweaver. The site is www.nomadicmonkimages.com. In IE8 & 7 the images on home page is fine, I have however tried to get this rendering better. As a result of viewing in IE6 I have re-created a new homepage for testing to see if I can improve the page the results can be seen in www.nomadicmonkimages.com/index1.htm you can view. This has improved, however the image of the lion in index1.htm is misaligned the image box is showing out of line to the left.

       

      This is also happening on other pages on the website when viewed in IE6 for example "Events and Commissions" and also in the "Travel" page, could I please have some advice on how to solve

       

      Pete

        • 1. Re: Internet Explorer Issue with IE6
          mhollis55 Level 4

          I hate Microsoft's browsers...


          Firstly, in your style sheet do this before anything:


          html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {

            margin: 0;

            padding: 0;

            border: 0;

            outline: 0;

            font-size: 100%;

          }


          This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule.

          Additionally, the zoom function in Internet Exploder is bad:

          In your page code:

          <!--[if IE]>
          <style type="text/css">
          /* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
          #outerWrapper #contentWrapper, #outerWrapper #contentWrapper #content {
            zoom: 1;
          }
          </style>
          <![endif]-->

          With IE6 i sometimes have to completely rewrite the entire style sheet for certain elements, like menus. Again in the web page:

          <!--[if IE 6]>
          <style type="text/css" media="all">
          @import url("../Menu/content/menu_ie.css");
          </style>
          <![endif]-->

          if ... endif statements allow you to program around certain browser incompatibilities