I tracked it down but I don't understand what causes it. Turns out the orignal template also suffers from the same problem.
In the style.css file that came with the template, the background is set with a 1px wide image on repeat.
.bg{background:url(../images/header-tail.gif) center top repeat-x #fff;}
Removing this background declaration changes the whole BG to white as expected, but also the line goes away. The line shows up exactly at the bottom of the background image which is supposed to fade nicely into white. I also discovered that in firefox, the line shows up on certain zoom levels on the browser itself, and others it is white as expected. I'm thinking this might be a bug in Firefox itself?
I'm not sure if it's safe to ignore or not. How can i see if it's a problem with my image/code?
edit: I think it's safe to ignore afterall. I did a "reset" on the zoom of firefox and the line disappears... Turns out I've been browsing websites in Firefox on a slightly zoomed out level for I don't know how long. So the line shows up on abnormal zoom levels. I'm guessing that's nothing I should really be concerning myself with.