My div moves when I have a unorderd list

HTML & CSS
1

Hey there!

I have a div where I’m going to have a navigation menu with listed items in a unorderd list but when I have it inside the div, the div moves down like 30px or something.

This is my html

<!DOCTYPE html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="../css/styles.css" rel="stylesheet" type="text/css">

<title>kwpwebdesign.se - Startsida</title>
</head>


<body>



<div id="upper">

<div id="innerupper">

<ul>
<li>Hem</li>
<li>Om mig</li>
<li>Tjänster</li>
<li>Kontakt</li>
<li>Övrigt</li>
</ul>



</div>


</div>

<div id="wrapper"></div>


</body>
</html>

And this is my CSS:

body {background-color:#FFFFFF; margin-top:0; margin-left:0; margin-right:0; }


#upper { height:70px; margin-left:auto; margin-right:auto; background-color:#990033;   }

#innerupper { height:70px; margin-left:auto; margin-right:auto; width:1000px;  }

#innerupper ul  { list-style:none;  }
#innerupper ul li { display:inline; margin-left:25px;  }

#wrapper { margin-top:25px; height:800px; margin-left:auto; margin-right:auto; width:1000px; background-color:#CCCC99;}

I love all help!

2

Hi, it’s moving down because the <ul> has a top margin by default set on it. That causes everything to move down (you also have a margin collapse going on)

To rectify everything, just remove the top margin on <ul>. You should really have a reset in there :).

3

Great, I learned something new today :smiley:

But what if i wanna push my listed items down a bit, I can’t wrap a div around them and use margin-top because the same thing happens?

4

Than you just need to stop the margin collapse going on that I mentioned :).

[COLOR=#000000][FONT=Consolas]#innerupper{padding-top:1px;}[/FONT][/COLOR]