Hi there,

 

I have the same problem on my sites as lynda.com for example. Go to lynda.com and make your window say 300px wide and use the scroll bar at the bottom to move left and right across the page, the background to the yellow search bar and some other backgrounds dont show.

 

Please see attached file for a screenshot of the problem.

 

How can I fix this show it does show when scrolled?

 

On such div's I am using

 

background:url(....jpg) repeat-x;

 

etc.

 

Thanks

I was just about to post the same question... I hope we'll get an answer..

If you don't post your code, how on earth can you expect anybody to help you?

 

http://www.webdesignerforum.co.uk/topic/54077-for-goodness-sakes-make-a-fiddle/

A rough guess here, but looks like it's possibly a float issue

The black and yellow <div> om Lynda.com uses the following CSS

 

#fat-footer { 
   width: 100%;  
   background-color: #000;  
   margin-bottom: 0;  
   padding-bottom: 0;	 
   text-align: left;
border-top: 34px solid #FFBA00; 
clear: both;
margin-top:34px;
}

 

The site is based on a 960px grid layout.

 

Setting width:100%; means the browser will render to 100% of the browser window width. If the window is less than the 960px width there will be a blank area when you scroll horizontally. Try this:

 

#fat-footer { 
   width: 100%;
   min-width:960px;  
   background-color: #000;  
   margin-bottom: 0;  
   padding-bottom: 0;	 
   text-align: left;
border-top: 34px solid #FFBA00; 
clear: both;
margin-top:34px;
}

 

Setting width:100%; means the browser will render to 100% of the browser window width. If the window is less than the 960px width there will be a blank area when you scroll horizontally. Try this:

 

#fat-footer { 
   width: 100%;
   min-width:960px;  
   background-color: #000;  
   margin-bottom: 0;  
   padding-bottom: 0;	 
   text-align: left;
border-top: 34px solid #FFBA00; 
clear: both;
margin-top:34px;
}

 

So simple, it works!

Thanks a lot