After doing a lot of cross-browser testing, I think I've finally ironed out all of the visual bugs here save one: in Opera and some WebKit browsers (namely Safari) that nice little arrow in the top left that shows you what page you're on gets shifted left by one pixel, but only when the browser window doesn't have a scrollbar.

My solution is to just have enough content to make my top-level pages scroll on all but the most high-resolution screens, which is kind of a hack, but one I'll have to live with for now.

I'm still frustrated though because I have no idea what's causing the problem. Do these browsers have a bug in the way they calculate percentage widths when there's not a scrollbar? Is there some kind of extra padding on the window? Does the absence of a scrollbar break negative margins? If any CSS designers are reading, have you ever experienced anything like this?

Here's the relevant CSS:

#meta {
	position: fixed;
	margin-left: 2%;
	width: 20%;
}
	
	#meta .menu {
		list-style: none;
		margin: 0 0 40px;
		float: right;
	}
		#meta .menu li {
			float: right;
			clear: both;
			margin: 0;
			padding-right: 30px;
		}
		#meta .menu .current {
			background: url(../images/squarrow.png) no-repeat right center;
		}
	
#content {
	position: absolute;
	left: 22%;
	margin-left: -10px; /* move left to make up for the background image's shadow */
}