Welcome to WebmasterWorld Guest from 54.157.222.62

Forum Moderators: not2easy

Message Too Old, No Replies

Couple of pixels difference in IE and FF

   
11:28 am on May 11, 2008 (gmt 0)

5+ Year Member



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

8:59 pm on May 11, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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.

7:31 am on May 12, 2008 (gmt 0)

5+ Year Member



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

1:27 pm on May 12, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

12:36 pm on May 24, 2008 (gmt 0)

5+ Year Member



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 ?

12:43 pm on May 24, 2008 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Add...

#header-section img {
display:block;
}
10:19 pm on May 24, 2008 (gmt 0)

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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