homepage Welcome to WebmasterWorld Guest from 54.166.228.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Couple of pixels difference in IE and FF
glennk




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

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




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

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




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

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




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

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




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

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




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

Add...

#header-section img {
display:block;
}

phranque




msg:3658359
 10:19 pm on May 24, 2008 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved