Solved

Remove white space above header containing nav bar with drop down lists

Posted on 2013-12-12
13
1,084 Views
Last Modified: 2013-12-15
All,

I'm trying to remove whitespace at above a header containing a nav bar with drop down lists.

I've got the top margin and padding set to zero, and the white space seems to be controlled by the Overflow style.  If Overflow is hidden, the whitespace at the top is greatly decreased.  If Overflow is visible, the white space increases.

The problem is that if I set overflow hidden, the drop-down lists on my nav bar are truncated.  If overclow is visible, the drop downs show completely, but I've got a lot of white space at the top.

The HTML/CSS i'm using at the top is (let me know if I need to post more):

<div id="header" style="width:100%; overflow:hidden; height:500 background-color:#0B77A4; position:relative; margin-top:0; padding-top:0;background-color:#0B77A4"> 

<nav id="top" style="overflow:visible;">

Open in new window


This is what it looks like with Overflow hidden:
Overflow hidden
This is what it looks like with overflow visible:Overflow visible
How do I get rid of the whitespace at the top (ideally completely get rid of the white space), without preventing the drop down lists from showing  in their entirety?

(A good example of what I'm trying to do is the page header on EE... no whitespace at the top, with drop-down lists showing in full)

Thanks!
0
Comment
Question by:mbizup
  • 6
  • 4
  • 3
13 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39714195
I will need to see the whole page context.  There is something else in the layout contributing to the problem.  Post a link please.


Cd&
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39714205
We're going to need to see a link to your site. CSS doesn't work in isolation - it cascades, so some styling right at the beginning of your CSS could effect something right at the end of your HTML

In the code you've posted you have some errors:

height:500 background-color:#0B77A4;

Should probably be this:

height:500px; background-color:#0B77A4;
0
 
LVL 61

Author Comment

by:mbizup
ID: 39714348
You guys are way ahead of me.  I don't have a site yet.  I'm just trying CSS and HTML samples and tutorials for techniques to use in a site.

This is the sample I started with:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

Once I went through the tutorial and got that working, I tried giving the header a background (and wound up with the white space issues).

This folder has everything I've put into the page -- the HTML, CSS and images:
Test-WhiteSpace.zip
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 39714394
in xxxJTFmain.css you have:

#menu {
	list-style:none;
	width:940px;
	margin:30px auto 0px auto;
	height:43px;
	padding:0px 20px 0px 20px;

Open in new window


And the 30px top margin may be the source of the white space.

Cd&
0
 
LVL 61

Author Comment

by:mbizup
ID: 39714421
That definitely did it - apart from a small margin around the edge, where it is not completely flush with the top of the window (I'll keep working with that).  

I wouldn't have guessed that, because the menu is contained in the background, and I thought the background properties would be controlling the spacing?  Just confused why that affected it.
0
 
LVL 61

Author Closing Comment

by:mbizup
ID: 39714422
Thanks!
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 61

Author Comment

by:mbizup
ID: 39714497
Setting that margin negative instead of to zero gets rid of the vertical white space completely.

Great stuff!

	list-style:none;
	width:940px;
	margin:-10px auto 0px auto;
	height:43px;
	padding:0px 0px 0px 0px;

Open in new window


Thanks again.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39714560
Setting negative margins is almost always a hack to fix something else, and as you're learning I would strongly recommend you don't do it !!

The small gap is because the BODY element has a default margin around it, so you can remove it by setting the margin to 0px

body { margin: 0px; }

One thing you will find is that different browsers apply different defaults to various elements, and most designers will reset the default styles before starting to add their own. This starting off with this at the start of your own CSS:

* { margin:0px; padding: 0px; }

but that developed into a full reset stylesheet. Probably the most widely used one was Eric Meyer's - http://meyerweb.com/eric/tools/css/reset/

A more modern approach is to normalize the defaults instead of resetting them - rather than remove all styling, a normalize file applies sensible defaults to all elements that is consistent across all browsers - this is a popular one that is part of the HTML5 Boilerplate project - http://necolas.github.io/normalize.css/

I would recommend that all of your web projects start with a normalizer :)
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 39714571
As to why your menu margin caused the gap - it's because of collapsing margins and is one of the quirks of CSS that will constantly bug you until you get your head around it ;)

http://reference.sitepoint.com/css/collapsingmargins
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39715496
I think maybe you have the wrong idea about background.  The background does not contain the element.  It sizes to the box definition elements.  A web page is three dimensional and the background is always the bottom layer of an element box.  The layering of elements can be controlled with z-index but a background is just decoration for the element where it is declared; so it sizes and positions to the element and can never go outside the box.

Cd&
0
 
LVL 61

Author Comment

by:mbizup
ID: 39720210
Chris,

Thanks for following up.  I'm going to have to read that article a few more times to really get it, but it seems to explain issues I've run into that have had me pulling my hair out.


Cd&,

<< The background does not contain the element.  It sizes to the box definition elements. >>

That explains one of the many things on my tried and failed list - I had tried placing an empty div at the top with a background color and image to fill the gap between the header and the top of the page.  It didn't even show up (makes sense with your explanation)
0
 
LVL 61

Author Comment

by:mbizup
ID: 39720230
Not complaining, and I am actually enjoying learning this stuff... but I think it would have been easier for me to learn if I hadn't have spent years developing other types of applications.

With the web stuff, every step of the way I'm running into *something* that seems totally counter-intuitive until I completely change the way I think about it.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39720530
Web dev is a completely different mindset.  The markup and CSS are actually not code.  The browser uses them as meta data to build a document object. It does not render from the source, but through triggers in the DOM.  

A browser almost never throws a hard error.  If it runs in to something that has an error or is invalid; it makes a "best guess" and continues.  if it runs across something it does not understand, it simply ignores it. How it hands those situations is totally unpredictable cross-platform, because the standards are open in thee area of error handling because each manufacturer has their own way of coding the underlying primitives and need flexibility when it come to what they do with the broken pieces.

The net result is that 60% to 70% of pages on the internet have errors that will show up in a validator.  The pages work with the errors, until they don't, and when a sloppy developer comes crying they finally start to understand why Web Dev Experts are mean SOBs who tell users to validate their code and fix the errors before we will spend much time on it.

The biggest problem is that the technology and often the "correct" answers change every six months.  Every new device, every new version of an OS, and every new version of a browser change "best practice".  The worst is mobile because the manufacturers have not adopted common standards for a lot of things and doing pages for mobile is a task similar to the insanity of desktop browsers in the 1990s through to about 2003 when we finally got some agreement on what the DOM should look like.

However the chaos means the good web developers make a lot of money, One-trick ponies don't last and the newbies either have to invest effort learning if they are serious about doing Web Dev.

All in all it is fun; never boring; and forces you to keep up.  As for Web Dev on EE... we have some of the best on the Internet, and we mostly get along so it makes for a pleasant workplace.

Cd&
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

758 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

19 Experts available now in Live!

Get 1:1 Help Now