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?
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;
}
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 */
}
}