1px Off Screen At The Top And Left Side

Why does Firefox move my div 1px off the screen at the top and left side and how do I fix this (CLICK HERE TO SEE)? IE and Opera both display it properly within the browser viewport. I'm using a table inside the '#header' div to give me the black borders that you see, which is what I want. Everything else is contained in the '#container' div.

Code:

#container {
}

#header {
	position: relative;
	margin-bottom: 1px;
	width: 100%;
	height: 60px;
}

#header table {
	width: 100%;
	height: 60px;
	border: 1px solid black;
	border-collapse: collapse;
}

#header td {
	padding: 0;
	text-align: center;
	border: 1px solid black;
}

-----------------

<div id="container">
		<div id="header">

			<?php include('include/header.php'); ?>

		</div>
<div>

Code (markup):

 

So I guess nobody has any idea why it does this or how it can be fixed?

 

Well, I think the issue might be your code is in quirks mode in IE - there's an OBVIOUS cause here... you are declaring the width of the table as 100% + 2px... so it's wider than the containing DIV.

I'd have to see the ENTIRE code though to be certain - as would most others. Some tiny snipped is NOT enough for most people to help you with a layout issue as it could be a invalid doctype or lack of doctype, overthinking the entire layout, invalid markup, or a dozen other things APART from the code you posted.

Though mixing % widths with px borders is almost always a total /FAIL/ - as is trying to use borders on ALL sides with border-collapse .

 

Ok, here's the entire code in a zip then: CLICK HERE. I know it's not the doctype as I have already researched that part. My table does have 100% width, but contains pixel widths for the cells. I don't think that's what's causing the problem though.