Fixing odd spacing between divs on my site

Question

Hey, I appear to have a CSS problem, regarding the spacing of my <div>s on my site.

If you point your browser to www.marioplanet.com you will see an odd space after my Apple-themed navigation bar.

I was wondering if anyone can help me identify why this spacing was added, and how I can eliminate it, as it's undesired.

Also, I believe it has something directly related to the nav bar, because without the nav bar, this is no spacing problem.

Thanks!

Answer 1

It is because of <a></a> present in <li id="gn-support"><a></a></li>

Answer 2

That #globalheader DIV that contains the menu bar has 18px of vertical margin (top and bottom). So naturally what follows is displaced by 18px.

#globalheader {
height:37px;
margin:18px auto;
position:relative;
width:771px;
z-index:1;
}

Answer 3

You might want to remove the gn-ipad, gn-itunes and gn-support <li> elements from your html.

Answer 4

Get rid of the 18px portion of the margin in the globalheader item, then change the width of the globalnav item to 1000px:

globalnav {

margin:0; padding:0; width:1000px; }

Answer 5

Ok the problem has to do with you fixed width on:

#globalheader{
      width: 769px;  //this is too small and actually not needed.
}

The contained list (#globalnav) has a rendered width of 830px (it has some white space at the end didn't investigate to see where it came from. So if you remove the fixed width from globalheader and add a margin-left of 200px to #globalnav you will center it and get rid of the space.

Additionally if you can see why your list have a bunch of white space to the right of it expanding its size to 830px you can just do a margin-left and margin-right of auto and center the list inside the global header div.

Figured out where the extra space at the end of the ul is comming from list items gn-itunes and gn-support are both rendering with 103px in width. this is comming from the (#globalheader #globalnav LI A css rule) You can override the width in (#globalheader #globalnav li#gn-support A) as well as the (#globalheader #globalnav li#gn-itunes A) css rules and that should fix it as well without resorting to fix above.

Answer 6

If you change the width of globalheader will work.

#globalheader { height:37px; margin:auto; position:relative; width:515px; z-index:1; }

If you want to add more navigation links later you will have to increase the width of globalheader.