html - CSS not loading in Firefox or IE. Works in Chrome -
i've created simple church directory in edited css change 1 of default map markers 1 of own. issue having map marker displayed correctly on chrome , safari not firefox ie or edge.
code
 /* theme name:     listify child theme uri:      http://astoundify.com/themes/listify template:       listify version:        1.0 */ .job_listing-rating-wrapper, .map-marker-info .rating, .single-comment-rating, .star-rating-wrapper {     display: none !important; }   .type-job_listing.style-grid .job_listing-entry-footer {     display: none; } .ion-information-circled {   content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/map-marker1.svg); }  .ion-ios.information-circled {   content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/map-marker1.svg); }  .ion.md.information-circled {   content: url(http://copticchurch-directory.org/wp-content/uploads/2016/08/map-marker1.svg); }      
the problem use of content property on regular elements. use instead background property, have better cross-browser support.
change following:
.ion-information-circled {     content: url(...); }   into this:
.map-marker .ion-information-circled::before {     content: "";     background: url(...) }          

Comments
Post a Comment