CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerfirefox
abbanoob
abbanoob

Reputation: 216

CSS not loading in Firefox or IE. Works in Chrome

I've created a simple church directory in which I edited the CSS to change one of the default Map Markers to one of my own. The issue that I am having is that the Map marker is displayed correctly on Chrome and Safari but 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);
}

Upvotes: 3

Views: 627

Answers (1)

Sampson
Sampson

Reputation: 268324

The problem is with the use of the content property on regular elements. Use instead the background property, which will have better cross-browser support.

Change the 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

Upvotes: 1

Related Questions