Background image - IE versus Mozilla

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:

.

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

 

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;

}

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