CSS Forum

**Joe3000** · 06-11-2009, 08:41 AM

Hello,

I have two divs, each with their own background image:
http://j-dog.co.uk/help/background/index.html

In IE 6 all is well but in FF 3 the header background image is slightly out of line. Can you see where it is not flush with the other background image?

This image highlights the problem in FF:
http://j-dog.co.uk/help/background/help.PNG

Here is the CSS:

Code:

@charset "utf-8";
body {
background: url('bg_all.gif');
background-repeat: repeat-y;
background-position: center;
margin:0px;
min-width: 100%;
}
#wrapper {
margin:0 auto;
width:960px;
text-align: left;
}
#header {
background: url('bg_header.gif');
background-repeat: repeat-x;
background-position: center;
width: 100%;
height: 78px;
margin: 0px;
}

And here is the HTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>blank</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">header</div>
<br />
<!-- end of wrapper --></div>
</body>
</html>

Thanks.

**darrenfox** · 06-11-2009, 10:47 AM

Remove the background-postion: center; from the header since it is already repeating x. I tried it here and it worked.

**Joe3000** · 06-11-2009, 12:16 PM

Thanks but it has not worked for me in Firefox 3

Which browser are you using?

I've made the changes and re-uploaded it.

**legenda** · 06-16-2009, 05:03 PM

Will this fix it?

Code:

div#wrapper {
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    margin: 0 auto;
    text-align: left;
    width: 958px;
}

Or tell samsung.com to fix it

?

**larryatwt** · 06-16-2009, 10:43 PM

Have you fixed it? I don't see the problem in FF 3.