CODEWITHSUNDEEP
cssfirefoxviewportbackground-position
DaedalusPrime
DaedalusPrime

Reputation: 7

CSS background-position variation between chrome/firefox

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;
}

Upvotes: 0

Views: 757

Answers (2)

Dmitriy
Dmitriy

Reputation: 4503

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>

Upvotes: 1

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

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

Upvotes: 1

Related Questions