Adobe Community: Background image

whatalotofrubbish

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:

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

<p>an Official BMW Club </p>

</div>

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?

677 Views 4 Replies Latest reply: whatalotofrubbish, Apr 24, 2012 9:10 AM

Replies

Currently Being Moderated

1. osgood_,

Apr 24, 2012 4:45 AM in reply to whatalotofrubbish

Report

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> 

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;
}

|
Mark as:
Currently Being Moderated

2. whatalotofrubbish,

Apr 24, 2012 5:58 AM in reply to osgood_

Report

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

|
Mark as:
Currently Being Moderated

3. pziecina,

Apr 24, 2012 6:25 AM in reply to whatalotofrubbish

Report

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:
Currently Being Moderated

4. whatalotofrubbish,

Apr 24, 2012 9:10 AM in reply to pziecina

Report

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!

|
Mark as:

Dreamweaver

Background image - IE versus Mozilla

Apr 24, 2012 4:31 AM

More Like This

Bookmarked By (0)

Answers + Points = Status