Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

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
0
suprapto45
Asked:
suprapto45
  • 2
1 Solution
 
ZadoCommented:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now