4 Replies Latest reply: Apr 24, 2012 9:10 AM by whatalotofrubbish RSS

    Background image - IE versus Mozilla

    whatalotofrubbish Community Member

      I have the following CSS file for my headers:

      .header {

          font-family: "BMW Type Global Pro Bold", Arial;

          font-size: medium;

          color: #FFF;

          background-color: #000;

          border: medium solid #CCC;

          margin: 5px;

          padding: 5px;

          z-index:-10;

          background-image: url(../images/flaglogo.gif);

          background-repeat: no-repeat;

          background-attachment: scroll;

          background-position: right 10px;

          height: auto;

          }

      .header h1 {

          font-size: 150%;

      }

       

      The code to display the header is as follows:

        <div class="header">

                 <h1>BMW Clubs <br>  European Federation</h1>  

         <p>an Official BMW Club </p>

         </div> <!-- end .header -->

       

      This works fine in Chrome and Mozilla, but in IE 9 the background image sits on the border, instead of having a small gap.

      This is the IE version with no gap between the large logo and the border:

      ie9.JPG.

      This is how I need it to be displayed, which it does in Chrome and Mozilla Firefox.

      chrome.JPG

       

      Can anyone suggest why this is happening and perhaps supply a fix?

        • 1. Re: Background image - IE versus Mozilla
          osgood_ MVP

          whatalotofrubbish wrote:

           

          I have the following CSS file for my headers:

          .header {

              font-family: "BMW Type Global Pro Bold", Arial;

              font-size: medium;

              color: #FFF;

              background-color: #000;

              border: medium solid #CCC;

              margin: 5px;

              padding: 5px;

              z-index:-10;

              background-image: url(../images/flaglogo.gif);

              background-repeat: no-repeat;

              background-attachment: scroll;

              background-position: right 10px;

              height: auto;

              }

          .header h1 {

              font-size: 150%;

          }

           

          The code to display the header is as follows:

            <div class="header">

                     <h1>BMW Clubs <br>  European Federation</h1>  

             <p>an Official BMW Club </p>

             </div> <!-- end .header -->

           

          This works fine in Chrome and Mozilla, but in IE 9 the background image sits on the border, instead of having a small gap.

          This is the IE version with no gap between the large logo and the border:

          ie9.JPG.

          This is how I need it to be displayed, which it does in Chrome and Mozilla Firefox.

          chrome.JPG

           

          Can anyone suggest why this is happening and perhaps supply a fix?

           

          Seems a bit of an unstable way to me. Any text inside the header will affect the height of it and that height will be different across a range of browsers.

           

          What I would do first is zero out all of the padding and margin on the h1 and <p> tag inside the header (see below). That will give you a base to work from. But as I say different browsers are likely to render the text at slightly different sizes so trying to confine the height of the 'header' is at best luck and worst unrealistic.

           

           

          .header h1 {

              font-size: 150%;

          margin: 0;

          padding: 0;

          }

           

           

          .header p {

          margin: 0;

          padding: 0;

          }

          • 2. Re: Background image - IE versus Mozilla
            whatalotofrubbish Community Member

            Thanks for that. I changed the css as below:

            .header h1 {

            font-size: 170%;

            margin:10;

            padding:0;

            }

            .header p

            This provides an acceptable solution, though the gap in browsers other than IE is a little larger than I would have liked.

            I had not realized the extent of the differences in font sizes in different browsers.

            Howard Walker

            • 3. Re: Background image - IE versus Mozilla
              pziecina Community Member

              Hi

               

              If you are seeing a difference in display between IE9 and other browsers, (not IE8 or below), then this indicates that IE9 is rendering your page in quirks mode.

               

              Check all your code for errors, (Validate).

               

              PZ

              • 4. Re: Background image - IE versus Mozilla
                whatalotofrubbish Community Member

                Hi pziecina

                 

                It all validated out with no errors.

                However, after reading your post, a check on my I.E.9 showed that it was running in compatibility mode. Would that be the same as Quirks Mode I thought.

                This link provides the answer to that:

                http://hsivonen.iki.fi/doctype/

                 

                I am using HTML 5 with a   <!DOCTYPE HTML> which should set the page up correctly - unless my browser is set to the old ways - which it was.

                So I could probably have left my code as it was for most purposes, as few users would set their browsers to compatibility mode. Will edit it later and see.

                 

                How complicated can the web get!