Hi Peeps,

I am trying to learn about HTML 5 and CSS 3 so am building a site to do so but just had a query about webkit/gecko engines as have noticed a pixel jump and not sure how to remedy it in the simplest way.

The page is:
http://dev.pelli.co.uk/pelli/

First issue is, as I have given the a tags padding, it has moved the padded area up over the header.
Another issue is there is about a 2px difference between gecko (checked in Safari/Chrome) and Gecko (checked in Firefox), and not sure the best way to make it flush with the bottom of the header element.

The code is as follows:
Code:
<nav>
	<ul>
		<li><a href="#">Photography</a></li>
		<li><a href="#">Journal</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Airbrushing</a></li>
	</ul>
</nav>
Code:
/*headstrip*/
#headstrip {
	background:url(../images/structure/logostrip-gradient.png) no-repeat #2b2b2b;
	height:82px;
	margin-top:8px;
	width:100%;
}

#headstrip p { color:#d1d0d0; padding:50px 0 0 50px; }
#headstrip p a { border-bottom:1px solid #656565; color:#fff; text-decoration:none; }
#headstrip p a:hover { color:#dc3948; }

/*nav*/
nav ul { font-size:1.8em; margin-left:100px; }
nav ul li { display:inline; }
nav a {
	background:#e7e7e7;
	color:#2b2b2b;
	padding:15px 20px;
	text-decoration:none;
}
Thanks in advance