Q:

Specific Element positioned correctly in IE and Chrome, but not in Firefox...and I can't figure out why?

I've been reading up recently on cross-browser compatibility and have learned a lot, but I haven't been able to solve this specific problem.
On a site I built, www.paintnomorect.com, in Chrome and IE the contact form is positioned correctly at the top-left. However in Firefox, it is dropped below the main image, and I don't know whether it's a positioning issue, margin, float, or what...I've tried searching for answers, but most seem to be related to a specific instance and I haven't found one that's helped yet. 
Can someone help me figure out what's causing this issue and how to fix it? And is there a good way to troubleshoot issues like this so I can figure out what is causing problems in the future?

A:

Try to target FireFox only and change a perticular part of the CSS style:
<!DOCTYPE html>

<html>
<head>
<style type="text/css">
@-moz-document url-prefix() {
    h1 {
        color: red;
    }
}
</style>
</head>
<body>

<h1>This should be red in FF</h1>

</body>
</html>

