Gap between wrapper div and top of screen?

http://www.all4sides.com/KNR Designs/

The nav bar at the top should be all the way to the top of the screen. but I can't figure out why its not going? I have 0 margins at the top, so I cant see why it shouldn't be up there?

 

padding also should be 0, and try to put body margin 0 padding 0 also...

 

That doesn't fix the problem sorry.

 

try to position relative the wrapper and give it top:0px;

 

Show me a graphic of how you want it.

Sorry to say, not meant to insult...

In your signature you say:

Professional Website and Logo Design - KNR Designs

But if I look at the code, there is nothing "Professional" in it.
You are using a useless JS function to change the graphics when hovering over the menu buttons... why not using CSS?
You are using an unordered list that is not styled and text-align: right ... that is very bad code.

 

Ive temporarily fixed it by adding negative margins to the body element, not sure if this is good practice or not.

@CSM

If you see the page how it is now, that is how I want it with the top navigation "touching" the top of the page, before there was a gap between that bar and the top of the screen, I added a 0px margin to the body element, but it seems there was a 8px margin added by default, and I couldnt remove it. So i added a -16px margin and that seemed to fix the problem, I was wondering if this is good practice or not, it appears to work in IE, FF, and chrome?

 

Delete <div id="topnavmenu"> and change <ul> to <ul id="topnavmenu">

Remove the negative margin from the body.

Here is the corrected CSS:

@charset "utf-8";
/* CSS Document */

* {margin:0;padding:0;} /* got added */

.menubutton {
	background-image:url(button.png);
	background-position:bottom;
	height:80px;
	background-repeat: no-repeat;
	width:85px;
	display:inline-block;
	padding-left:22px;
}
body {
	background-image:url(bodybg.png);
	background-repeat:repeat-x;
	background-color:#FFF;
}

#wrapper {
        padding:0;
	width:950px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}

#topnav {	
    text-align:right;
	height:40px;
	background-image:url(topnavbg.png);
	background-repeat:no-repeat;
}

#topnav li {
	padding-right:5px;
	font-size:10pt;
	font-family:Arial, Helvetica, sans-serif;
	display:inline;
	color:#949494;
}

#topnav a:link {
        color:#949494;
	text-decoration:none;
}

#topnav a:visted {
        color:#949494;
	text-decoration:none;
}

#topnav a:hover {
	color:#FFF;
}
#topnav a:active {
	color:#FFF;
}

#topnavmenu {
	position:relative;
	right:80px;
	top:15px;
}

#logonav {
	width:950px;
	height:80px;
}

#logo {
    float:left;
	width:470px;
	background-image:url(logo.png);
	background-repeat:no-repeat;
	height:80px;
}

#logomenu {
	display:inline;
	float:right;
	width:460px;
	height:80px;
}

Code (markup):

 

I had a similar problem. I think all you need to do is the following:

Mine was my H1 element and the body, but it seems to be the same concept. I'm not a perfect coder, and that may not be the perfect way to do it, but I think it will work, and it will not have any negative impact on the rest of your site and will be cross-browser compatible.

 

Thank you both for your reply, problem solved.

 

Sorry to prod, but what worked for you? It interests me to know solutions to problems so I can better understand them in the future.

 

Added this to the CSS as CSM suggested.

* {margin:0;padding:0;} /* got added */

Code (markup):

Im assuming your code will work too, but I havent tried it yet.

 

Google for it, then you know what it does.

Google for "CSS Reset"