Problem with truncated background image using Firefox's scrollbar

Hi,

I have a strange truncated background image problem using Firefox. This works fine in IE.

Currently, I have one DIV with the background image set on it (this is to render the header). It looks fine but the problem happened if I resize Firefox using its scrollbar. Below are the steps on how to reproduce it.

1. Resize (drag-and-drop) Firefox to smaller window. The scrollbar in Firefox will be displayed at the bottom of the browser.
2. Then, using the Firefox's scrollbar at the bottom of the page, move the scrollbar to the center and etc.
3. You can see that the header is truncated. Please refer to the attached file.

Any idea on how to fix this?

Thanks
David
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>

<style type="text/css">
body {
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;
}

#header-wrapper {	
	width:100%;
	background-image:url(header.jpg);
	background-repeat:repeat-x;
	height:112px;
}

#header-inner{
	width:1070px;
}
	

</style>
</head>

<body>
	<div id="header-wrapper">
  		<div id="header-inner">
    		<div id="part_1">
				dasfads				
			</div>

    		<div id="part_2">
				asfasdf
    		</div>
    		<div class="clear"></div>
  		</div>

	</div>
</body>
</html>

Open in new window

firefox-scrollbar.png
LVL 16
suprapto45Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
ZadoConnect With a Mentor Commented:
You just need to add 'min-width:1070px;' in #header-wrapper:
#header-wrapper {       
        width:100%;
        background-image:url(header.png);
        background-repeat:repeat-x;
        height:112px;
	min-width:1070px;
}

Open in new window

0
 
suprapto45Author Commented:
Awesome.
0
 
ZadoCommented:
Thanks for points :-)
0
All Courses

From novice to tech pro — start learning today.