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