5 Replies Latest reply on Apr 8, 2010 12:02 AM by John Waller

    Image getting cut off in Internet Explorer but not Firefox

    fiveomar

      I'm having an issue with a logo image in the top bar of my webpage appearing correctly in Firefox but not IE. In IE, only 1/4 of the image appears, the rest of the pixels don't appear. Very strange. When I open the image on it's own in IE, it appears fine. It only doesn't appear fine within the webpage.

       

      I temporarily hosted the page here so you can see what's going on:

       

      http://gucdesign.atspace.com

       

      Anyone have any insight?

        • 1. Re: Image getting cut off in Internet Explorer but not Firefox
          mhollis55 Level 4

          Put the following in your Style Sheet before everything else:

           

          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.

           

          If you are using Internet Exploiter 5, which does not handle the standard box model, insert this in your page(s):

           

          <!--[if IE 5]>

          <style type="text/css">

          /* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */

          #outerWrapper #contentWrapper #leftColumn1 {

            width: 200px;

          }

          </style>

          <![endif]-->


          <!--[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]-->

          • 2. Re: Image getting cut off in Internet Explorer but not Firefox
            fiveomar Level 1

            Where exactly do I enter some of those elements? My code has most of them, so I don't know what specifically is causing the image to be cut off in IE.

            • 3. Re: Image getting cut off in Internet Explorer but not Firefox
              John Waller Adobe Community Professional & MVP
              Remove the background color on the following rule:

               

              .twoColElsLtHdr #header {
              padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
              background-color: #000;
              }
              • 4. Re: Image getting cut off in Internet Explorer but not Firefox
                fiveomar Level 1

                I posted the entire website online:

                 

                http://aydinarchitects.com

                 

                It appears that only the main page (profile) is getting the logo image cutoff, and this only appears to be happening to me in IE7 for me. I tried removing the background color as suggested, but it didn't seem to work. Any ideas?

                • 5. Re: Image getting cut off in Internet Explorer but not Firefox
                  John Waller Adobe Community Professional & MVP
                  function(){return A.apply(null,[this].concat($A(arguments)))}

                  It appears that only the main page (profile) is getting the logo image cutoff, and this only appears to be happening to me in IE7 for me. I tried removing the background color as suggested, but it didn't seem to work.


                  The answer is still the same and the background color is still there in the code on line 47:

                   

                  .twoColElsLtHdr #header {
                  padding: 0 10px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
                  background-color: #000;
                  }