Solved

Problem with truncated background image using Firefox's scrollbar

Posted on 2010-09-03
3
450 Views
Last Modified: 2012-05-10
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
Comment
Question by:suprapto45
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
Zado earned 500 total points
ID: 33599957
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
 
LVL 16

Author Closing Comment

by:suprapto45
ID: 33602297
Awesome.
0
 
LVL 8

Expert Comment

by:Zado
ID: 33602429
Thanks for points :-)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Several part series to implement Internet Explorer 11 Enterprise Mode
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question