Chrome and opera leaves empty space on top because of li padding - html

Question

I'm working on a homepage with fullpage slider.
At firefox everything went right!
At Chrome and Opera, I have an empty space on the top of the page.
I noticed that all the space is from the menu padding (li), when I turn it to 0 the space is getting shorter but is not leaving.
Here is my html
<ul id="connect">
<li>
logo
</li>
</ul>
<ul id="menu">
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
And my css is
#connect {
z-index: 10;
position: fixed;
width: 100%;
list-style: none;
margin: 0;
margin-left: 90px;
padding: 20px;
}
#menu {
z-index: 10;
float: right;
margin: 0;
font-size:12px;
list-style: none;
position:relative;
top:30px;
right:20px;
font-family: 'Open Sans', sans-serif;
}
li {
display:block;
float: left;
padding: 10px;
}
Could someone help?

Answer 1

I'd re-write your code like this so it's more simple and semantic: http://jsfiddle.net/kc4umn1c/
Whenever you use "position: fixed" you should also specify your X/Y coordinates ("left/right" in this case). I've added the styles below.
Also, look into using a reset.css file to make all of your styles fit nicely between browsers. (google html5 boiler plate, they have a good one.)
Good luck!
HTML
<header class="header">
<h1 class="logo">logo</h1>
<nav class="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</nav>
</header>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; }
.header {
position: fixed;
left: 0;
top: 0;
right: 0;
background: black;
z-index: 1;
padding: 20px;
color: white;
}
.logo {
float: left;
display: inline-block;
}
.menu {
float: right;
display: inline-block;
color: white;
}
.menu ul {
list-style: none;
}
.menu ul li {
float: left;
padding: 10px;
}