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.

copticchurch-directory.org

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(...) } 

https://jsfiddle.net/eyvetdz4/2/

enter image description here


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -