Solved

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

Posted on 2015-01-02
21
169 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
  • 10
  • 5
  • 5
21 Comments
 

Author Comment

by:Daniele Brunengo
Comment Utility
Any help?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
Comment Utility
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
 
LVL 53

Expert Comment

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

Cd&
0
 

Author Comment

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

Expert Comment

by:Deniz Dursun
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:Daniele Brunengo
Comment Utility
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
Comment Utility
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
Comment Utility
>>>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
Comment Utility
@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
Comment Utility
Sorry, I did it in a similar way, it seems to work now, can you confirm?
0
 
LVL 1

Expert Comment

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

Author Comment

by:Daniele Brunengo
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
The viewer will learn how to dynamically set the form action using jQuery.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now