Solved

Scrollable content appearing above header: how can I fix it?

Posted on 2015-01-02
21
176 Views
Last Modified: 2015-01-05
Hello guys, I have a problem with this here website:

http://deathless.it/lab/cireloadedtest/it/prova.html

I'd like to have a fixed position header, but I haven't been able to hide the scrollable content: if you try to scroll, you'll see it shows above the header, where it shouldn't.

I have tried using overflow:hidden; on all divs on the page but I wasn't able to fix this.

I think the main problem is, I need to keep everything inside a single div to have a uniform box-shadow. Without this limitation I would be able to fix it, but with the current structure I'm having trouble...

The code is accessible via Firebug and the like, but if you need something specific let me know.
0
Comment
Question by:Daniele Brunengo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 5
  • 5
21 Comments
 

Author Comment

by:Daniele Brunengo
ID: 40528979
Any help?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40529244
You probably need a negative top margin (an ugly hack) for the image or container.  The excessive inline scripting has mess up the document object to the point where I am not sure what the RenderObject for any given element is picking up from the hashtable.  The mix of stylesheets and line scripting makes it even more incomprehensible.

I don't think most of the 107 validation errors are a factor but illegal and obsolete attributes for the iframe are not going to help much.  

At this point I would suggest you will just have to experiment with trial and error to get it to look right.  It will still be badly hack and unreliable, but if you are only concerned with how it looks for your specific environment; you will probably stumble onto something that gives you what you want.

Cd&
0
 

Author Comment

by:Daniele Brunengo
ID: 40529302
Actually the inline scripting is all necessary because my client wants all of these plugins on the home page, so I have to include all the widgets he asks me too. But the site's structure is not so complex. There's a top menu div, then a container with header and the body section. The iframes are all mandatory because of those damn widgets, but if I remove all widgets the problem is still there.

So you're right, the page I linked to is totally unfit for the task at hand: here's a much simpler example (no scripting, no iframes, just the bone structure, the simplest possible), with the problem still present.

http://deathless.it/lab/cireloadedtest/it/prova.html
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40529322
The problem is the header tag it needs margin-top:-20px;

Cd&
0
 

Author Comment

by:Daniele Brunengo
ID: 40529335
But with margin-top:-20px; the gap between the top menu and the header disappears.
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530103
Hello;

You can use "layer scroll" for it.

1) Add this code before </head> tag

<style type="text/css">
body,#container{
overflow:hidden;
}
#container{
height:1px;overflow-y:auto;
}
</style>

Open in new window





2) Add this code after <body> tag:

<script type="text/javascript">
$(document).ready(function(){
	$("#container").height($(document).height()-300);
	$(window).on('resize', function(){
	$("#container").height(1);
        $("#container").height($(document).height()-300);

    });
});
</script>

Open in new window



Important: This code need jquery library. For your page, already included jqeury but if you try this code with your "prova.html" you need include jquery library with this code before </head>:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Open in new window

0
 

Author Comment

by:Daniele Brunengo
ID: 40530298
Deniz Dursun, I tried that out and you can see the result following the previous link. It's not exactly what I had in mind though, because the scrollbar has disappeared from the page and now there's a scrollbar directly inside the div.
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530304
I tried layer clip/mask methods too but I can't find another way.

Try this solution in your live site, I think this is not different than body scroll.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
ID: 40530312
Overflow is not going to help because the element is not overflowing, it is imple moving in response to the  scroll and moving past the fixed position elements.

If you want tp keep the gap then put a div with a white background there with position fixed or put the image in a div with padding-top:20px ;background-image:url(XXX); where XXX is the same image as used for the page. There will probably be some alignment issues with the image.  However bad design almost always ends up with a less than perfect implementation when the real world of technology limits are encountered.

A gap with nothing in it is obviously going to show anything that passes under it unless the is an implicit setting of the background.

I hope you are charging your client for all the extra time they have cost you by insisting on a dreadful design that is not going to win any points for usability, and is a maintenance nightmare.

Cd&
0
 
LVL 1

Accepted Solution

by:
Deniz Dursun earned 250 total points
ID: 40530380
Overlay image is good idea @Coboldinasour but it is looking bad when scrolling because of shadow and image piece difference than background.

I did it:

Add this code before than </head> tag:
<style type="text/css">
	.fakebg {
	background: url(fakebg.png) no-repeat bottom;
	width: 1000px; 
	height: 40px;
	position: fixed;
	z-index: 101;
	}
</style>

Open in new window



And add this code before <header> tag:
<div class="fakebg"></div>

Open in new window


This code need fakebg.png image. I attached as file to this message.
fakebg.png
0
 

Author Comment

by:Daniele Brunengo
ID: 40530386
COBOLdinosaur, yes I am charging extra, they don't seem to mind. Your solution is what I had already thought about, but I didn't try it out because of alignment woes. I guess I'll try it out, maybe I'll use the top menu div, which is already "above" the scrollable content.
0
 

Author Comment

by:Daniele Brunengo
ID: 40530394
Deniz Dursun, this is probably the right way to do it (or to hack it) and very similar to what COBOLdinosaur suggested, but there's some positioning issue:

Cattura-di-schermata--19-.png
I'll work on it though, thanks.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40530405
>>>yes I am charging extra, they don't seem to mind

In that case encourage them to give all their ideas and maximize the bill because in my experience after you are finished any problems or user complaints caused by the design issues will be blamed on you.

Cd&
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530441
@Maioneis:
I tried that code and working on my Pc without mistake (Chrome).

Please upload your code as prova.html to your site again, i must see for mistake.
0
 

Author Comment

by:Daniele Brunengo
ID: 40530514
Sorry, I did it in a similar way, it seems to work now, can you confirm?
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530529
Yes it is working. just looking some line as a border (1px). I think about png.
0
 

Author Comment

by:Daniele Brunengo
ID: 40531450
Yes, there's still a small defect but I think it may be negligible.

Anyway, I'm about to meet my client and I'll try to convince him to drop the fixed header altogether, it really serves no purpose whatsoever.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40531858
Actually it does serve a purpose.  Negative SEO.  The amount of space being wasted above to fold is compound by keeping it there.  The reduced content above the fold will reduce the weight in the search engines, and leaving it in the way when it is not needed may be seen as an accessibility issue as well as a usability inconvenience.  Your client is going to hurt their SEO if they insist on leaving it that way.

Cd&
0
 

Author Comment

by:Daniele Brunengo
ID: 40531866
Right now I have convinced them to remove the gap, so at least the site will be a little bit more manageable for me.
Still working on the fixed position header.
0
 

Author Closing Comment

by:Daniele Brunengo
ID: 40531872
Anyway, since you were kind enough to help me and walk some steps with me through this nightmare, here are points for both of you.
0

Featured Post

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Anyone familiar with PhotoSwipe? 3 19
Html split(text) 2 32
how to customize the text in the legend in highcharts 3 35
Saving Web Page as PDF 9 47
Find out what you should include to make the best professional email signature for your organization.
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

726 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