CSS div alignment problems

[bullchina]

this site: http://dave.showviz.net/bet2/

has a header image with a red line under the text that is part of the image, and then a div sitting behind it that has a css border property to continue the 1px red line to the extents of the page.

however, in firefox on linux, the line doesn't match up, firefox on mac i got it to work, but if you change the font size, by hitting ctrl + or -, or however you do it, the image moves up and down.

The design should look like this:

http://dave.showviz.net/bet/19.jpg

and I can't decide what the best way to do it: as an extremely wide jpg with the red line and the text in it, with the text as actual text in the html, or how i have it now with a tweak in the css file so the image won't shift around.

any help would be great, thanks, dave

[makeshift_theory]

why is the border behind it?  Are you using z-index and absolute positioning, I don't have time to check because I'm at work.  Anywho I would recommend using the following code for your line and too fix any problems your currently having:

[code]#line {
width:100%;
height:2px; // Height of line
color:#FF0000; // Color right now set to red
margin:0px;
padding:0px;
}


[b]IN HTML:[/b]
<div id="line"></div>

[/code]

try that and place it underneath your image.