Weird margin due to Lists? :s

[DrEvil]

So... I am currently making a website for a project and have my design setup.
Let me show the code first before I describe the problem... and an image...

The header is the first blue gradient, the gradient is then displayed again with a decreased width to fit the navigation bar.
The problem is... the margin between the first and second header is a set distance... the margin-bottom is meant to be 1px:

#header {
    height: 80px;
    width: 700px;
    background-image: url(images/header.png);
    margin-bottom: 1px;
}

This weird margin only occurs because I have a list (unordered... but probably doesn't make a difference -.-")

Like apparently having a list within a div causes the div to go down the page and not take into account any margins?

I would prefer the margin to be smaller because the gap between them looks too big.

I don't think the actual list CSS matters because I just put this between the div:

<ul>
  <li>Hello</li>
</ul>

and the margin automatically sets itself, which makes me to believe that my list CSS isn't a problem just the list causes some unwanted side effect?

As much as this problem may seem silly and time wasting, I would like to know why this happens.

Like it just seems silly that I'm not able to set a margin myself because of some weird bug.

If any more code is needed just say, but the list CSS has quite a few properties as I created a MultiDropDown menu.

Thanks fellow Webmasters and Webmistresses

 

[Miz]

CSS is a powerful yet mysterious beast. I think the best would give us the entire script of the page (non-JS related), and see if we can find a similar issue.

Some trouble might arise from inline list, but I don't think its that.

If you want an easy solution, you can use negative margins between your two headers.

 

[DrEvil]

I guess I'l just upload the whole thing, everything is in there...
I tried the negative margins, worked like a charm, just I want to know what caused the problem and not just a cheap solution.

So you can upload .zip but no .rar :s

 

[Artificial]

Some elements have default styles, such as margin or padding (and these can vary between browsers). The ul element for example has margin: 11px 0; by default (in my browser). That means you can fix your problem by applying the style margin: 0; to your ul.

You should familiarize yourself and use some inspection tool to figure out the stylings of elements. Chrome has excellent inspection tools built-in and Firebug is available for Firefox (their built-in tools aren't quite up to par yet IMO). If you can't see the CSS defining the margin in the user-defined CSS, check out the 'Computed' section in your toolset.

Also, you seem to have two divs with the same id in your code. IDs should be unique, classes are what you use to represent a group of elements.

 

[Magentix]

• Unordered lists have a top and bottom margin of 1em by default.
• Elements within the flow of a same formatting context have collapsing margins.

To prevent this, you could give your header (the big blue one) a bottom border of 1px in the same color as your page background and remove the 1px margin. There are a few other ways to prevent collapsing margins, though.

http://www.w3.org/TR/CSS2/box.html#collapsing-margins