Couple of pixels difference in IE and FF

[glennk]

Im currently messing with the header image/s in a template Im trying to ammmend for my site. There are 2 images placed side by side in the header. The problem is that if I get them to fill the allowed header space in FF the second image spills onto another line below the first image in IE. Also if I get the sizes right in IE I get a gap after the second image in FF. Isn't CSS so frustrating when these things happen.

The Html involved is :

<div id="wrap">

<!-- HEADER -->
<!-- Background -->
<div id="header-section">
<img border="0" src="img/logo-test.jpg" width="200" height="180"><img border="0" src="img/head-imagetest.jpg" width="744" height="180"></div>

The Css IS

/**************/
/* HEADER */
/**************/
#header-section {
width: 95em;
margin: 0em 0em 0em 0em;
}

#header-background {
width: 100%;
height: 100%;
float: left;
border: none;
margin: 0em 0em 0em 0em;
}

#header-background-left {
width: 180px;
float: left;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
border: 0em 0em 0em 0em;;
}

#header-background-right {

float: right;
margin: 0em 0em 0em 0em;
padding: 0em 0em 0em 0em;
border: none;
}

#header {
clear: both;
margin: 0em 0em 1.5em 0em;
border-top: solid 0.1em rgb(175,175,175);
border-bottom: solid 0.1em rgb(175,175,175);
background-color: rgb(235,235,235);
text-transform: uppercase;
line-height: 2.0em;
height: 2.0em;
color: rgb(50,50,50);
}

[swa66]

Is the html and the css in sync ?

I guess it's the broken box model of IE that's causing the pain: they apply the width on the wrong part.

A few tips:

• "

  margin: 0em 0em 0em 0em;

  " can be written as "

  margin: 0;

  " it's easier to write and read ;-)
  
• why float two background images next to each other? Why not use one big image ?
  

The solution: use conditional comments and fix the values for EI6 and IE7 in a separate overriding stylesheet. Don;t fix it for IE8, it should be standards compliant and nto sport the broken box model.

[glennk]

Thanks swa 66.

Will one big image solve this then ? If so I will go that way. Just one question on the broken box model though. Ive had a bit of a read this morning and it suggests the problem is the way IE calculates borders, margins and padding. But as all are set to zero in this instance how can this be the issue here ? No doubt I have missed something important ? I also read that IE7 will follow normal box rules if your page validates - is this right ?

Many thanks - Glenn

[Marshall]

Your problem is two fold. First, you are mixing measurements by using pixels for the images and em's for the header width. Also in the #header-section, you may want to do this:

#header-section {
width: 944px; /* change */
margin: 0;
padding: 0; /* Add */
}

And if you are using XHTML, border="0" is depreciated. You may want to remove that tag and add to your css:

img {
border: none;
}

Marshall

[glennk]

Ok Im still getting this same issue

I have changed to a single header image and this is the only code involved now

#header-section {
width: 944px;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-top: medium solid #8C8C8C;
border-top-width: 15px;
}

<div id="header-section">
<img src="img/head-imagetest.jpg" width="944" height="180" alt="anything">
</div>

There is a still a gap after the image in FF but not in IE.

Any ideas please ?

[pageoneresults]

Add...

#header-section img {
display:block;
}

[phranque]

if that gap on the right is almost 80 pixels, it is probably caused by the top border.