Skip navigation
Currently Being Moderated

Background image - IE versus Mozilla

Apr 24, 2012 4:31 AM

Tags: #background #images #ie

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?

 
Replies
  • Currently Being Moderated
    Apr 24, 2012 4:45 AM   in reply to whatalotofrubbish

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 24, 2012 6:25 AM   in reply to whatalotofrubbish

    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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points