Why do not these items appear on firefox browser?

Question

I have this page:

http://paul.dac-proiect.ro/

In Chrome all is well but look as displayed in Firefox.

      <div class="social" style="float:right">
               <div id="facebook"></div>
               <div id="twitter"></div>
               <div id="link"></div>
       </div>

.pozitie{position: absolute;top: 200px;left: 39;color:#f9f9f9;"}

/* IMAGINI HOVER SOCIAL MEDIA */    
#facebook {
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;
margin-right:5px;

}
#facebook:hover {
   background-image: url("http://placehold.it/26x26");
}

#link{
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;

}
#link:hover {
   background-image: url("http://placehold.it/26x26");
}

#twitter{
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;
   margin-right:5px;

}
#twitter:hover {
   background-image: url("http://placehold.it/26x26");
}

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

I tried to clean the cache but nothing has changed. Does anyone have any idea where this problem occurs?

Answer 1

The issue is due to an extra " in the class .pozitie which is causing Firefox to ignore subsequent rules. Remove " and the rules should then take effect.

Current incorrect syntax - Wont work in Firefox:

.pozitie{position: absolute;top: 200px;left: 39;color:#f9f9f9;"}
  
/* IMAGINI HOVER SOCIAL MEDIA */

#facebook {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#facebook:hover {
  background-image: url("http://placehold.it/26x26");
}
#link {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
}
#link:hover {
  background-image: url("http://placehold.it/26x26");
}
#twitter {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#twitter:hover {
  background-image: url("http://placehold.it/26x26");
}

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

New correct syntax - Will work in Firefox:

/* IMAGINI HOVER SOCIAL MEDIA */

#facebook {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#facebook:hover {
  background-image: url("http://placehold.it/26x26");
}
#link {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
}
#link:hover {
  background-image: url("http://placehold.it/26x26");
}
#twitter {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#twitter:hover {
  background-image: url("http://placehold.it/26x26");
}

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

The W3C validator points to this line as an issue: https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpaul.dac-proiect.ro%2Fwp-content%2Fthemes%2Fwpbootstrap%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Answer 2

Note: This only applies if your running an adblocker

It is your naming conventions so you are using an adblocker of somekind. I am using adguard and it blocks the .social class

#ad_global_below_navbar, img[width="88"][height="31"], #fb-root, #fb_groups, #flickr_badge_source, #flickr_badge_uber_wrapper, #odklocs0, #odklocs1, #vk_auth, #vk_donate, #vk_group, #vk_groups, #vk_like, #vk_poll, #vk_share, #vkshare0, .DiggThisButton, .addthis_toolbox, .btn-social, .google-buzz-button, .odkl-share-oc, .odkl-share-oc-fc, .odkl-share_button, .share-menu, .share-panel, .social, .social-links, .vk-like, .vk_share_button, a.mrc__plugin_like_button, a.mrc__plugin_recommendations, a.mrc__plugin_share_friends, a.mrc__share, a.odkl-klass, a.odkl-klass-s, a.odkl-klass-stat, a[href="http://del.icio.us/post"], a[href="http://twitter.com/share"] {
  display: none!important;
}

---

It seems from inspecting your code your css styles are not being applied to the #facebook ids in firefox