CSS background-position variation between chrome/firefox

Question

I am creating a website for a final project and am having an issue with the background-position of my nav's image changing between browsers (mainly Firefox).

This can be demonstrated by clicking the link to the page I have uploaded on my college's server: http://cis.scc.losrios.edu/~cisw320q_stu007/sbc/index.html . Alternating the viewport (Chrome/Firefox) used will show the positioning difference I am talking about. Chrome displays the background-position correctly (with the "Business BLDG" right below the school logo).

Is there a CSS trick I can use to alleviate this problem, so that the background-positioning is static between all viewports?

Thanks!

main nav code:

div#nav {
width: 1024px;
border-bottom: 3px solid #fff;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #660000;
background: url(http://i60.tinypic.com/i6gn5x.jpg);
background-position-y: 53.75%;
color: #fff;

}

Answer 1

You could use this snippet to target specifically Firefox and set the right background-position for it.

@-moz-document url-prefix() { 
    /* Your styling for Firefox goes here */
    div#nav{
       /* background-position: firefox-value */
    }
}

Answer 2

background-position-y: 53.75%;

to

background-position: 0 53.75%;

 /* NAViGATiON START */ div#nav { width: 1024px; border-bottom: 3px solid #fff; border-top-left-radius: 25px; border-top-right-radius: 25px; background-color: #660000; background-image: url("http://i60.tinypic.com/i6gn5x.jpg"); background-position: 0 53.75%; color: #fff; } div#nav h1 { text-align: center; margin: 0; border-top-left-radius: 25px; border-top-right-radius: 25px; background-color: rgba(102,0,0,.91); font-family: sans-serif; } div#nav ul { list-style-type: none; text-align: center; margin: 0 auto; margin-left: -35px; border-top: 3px solid #fff; } div#nav ul li { display: inline-block; border: 4px solid #000; margin-left: -5px; width: 197.6px; height: 100px; line-height: 5; background-color: rgba(34,34,34,0.2); } div#nav ul li a { color: #fff; text-decoration: none; font-family: verdana; font-size: 1.2em; } div#nav ul li:hover { background-color: rgba(34,34,34,0.8); } div#nav ul li a:hover { color: #FFCC00; -webkit-transition: all 1.5s; } 

 <div id="nav"> <h1><img src="http://i60.tinypic.com/28i2o9e.png"></font><br> City Business Center</h1> <ul> <li><a href="#" title="Go back to the Business Center Homepage" alt="site index">Home</a></li> <li><a href="#" title="Find out more about us; our mission statement and history can be found here." alt="about us">About</a></li> <li><a href="#" title="Use this form to contact us for any non-work related inquiries!" alt="contact">Contact</a></li> <li><a href="#" title="Petition the business center for specific services." alt="petition for services">Petition</a></li> <li><a href="#" title="Want to support your local community college and help fund potential educational programs and outreach? Click here.">Donate</a></li> </ul> </div>