1

Images do not show in Firefox ... Safari, Chrome, Opera OK.

BUT, this works everywhere?

<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying">


.headerImage {
  width: 75%;
  height: auto;
  padding-bottom: 1.5em;
}

.brokenHeart {
  display: inline-block;
  width: 100%;
  content: url("../images/Broken_Heart.gif");
}

.weddingRings {
  display: none;
  width: 100%;
  content: url("../images/Wedding_Rings.gif");
}

.centerBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="headerImage centerBlock">
  <img class="brokenHeart" alt="">
  <img class="weddingRings" alt="">
</div>

Weird, it's just in Firefox ...

Appreciate some genius here, because I'm falling very short.

VXp
  • 11,598
  • 6
  • 31
  • 46
  • 1
    Possible duplicate of [Content url does not display image on firefox browser](https://stackoverflow.com/questions/17907833/content-url-does-not-display-image-on-firefox-browser) – NullDev Jan 09 '18 at 17:28
  • 3
    What's the thinking behind doing it that way instead of ``? – Lee Kowalkowski Jan 09 '18 at 17:37
  • See: https://stackoverflow.com/a/24185344/2397327. Excerpt: "url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely." – Jonathan Lam Jan 09 '18 at 17:42
  • Well, url can be used with content, but content cannot be used unless doing `::before` or `::after` pseudo-elements: https://developer.mozilla.org/en-US/docs/Web/CSS/content – Lee Kowalkowski Jan 09 '18 at 17:43
  • For most reliable consistency throughout various browsers, consider using the `background-image` property instead, or applying the `content` property to `:before` or `:after` *pseudo-elements*. – UncaughtTypeError Jan 09 '18 at 17:44
  • @UncaughtTypeError Pseudo elements should use a double colon, not a single. https://developer.mozilla.org/en-US/docs/Web/CSS/::after I cannot duplicate this problem. – Rob Jan 09 '18 at 18:17
  • I followed L.K.'s advice and it worked perfectly. Once again, the simple way may be the best way. Thanks again, LK. –  Jan 09 '18 at 18:26
  • @Rob As a rule yes, but both can be used. The double colon is to *distinguish* between *pseudo-classes* and *pseudo-elements*. According to MDN on *pseudo-elements*: "As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements." ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements For better legacy browser support it may be better just to stick with single. – UncaughtTypeError Jan 09 '18 at 18:28
  • @Rob See also https://stackoverflow.com/questions/10181729/should-i-use-single-or-double-colon-notation-for-pseudo-elements and https://stackoverflow.com/questions/41867664/double-colon-vs-single-colon-at-css-syntax (I'm sure you already know this, although for other readers who may be unsure as to the reasons why) – UncaughtTypeError Jan 09 '18 at 18:28
  • @UncaughtTypeError As a rule is the rule you should follow. Unless one needs to support IE8 and older, use the double colon. That's the standard. – Rob Jan 09 '18 at 18:31
  • @Rob I'll continue to use single colons for legacy browser support regardless, that is just my preference, although I would advise others to follow their own discretion, and if unsure, then stick to the standard. – UncaughtTypeError Jan 09 '18 at 18:35

3 Answers3

2

Content is making this error, so adding :after should do the trick for firefox

.brokenHeart:after {
display: inline-block;

  width:   100%;

  content:  url("../images/Broken_Heart.gif");
}

.weddingRings:after {
  display: none;

   width:   100%;

   content: url("../images/Wedding_Rings.gif");
 }
Ivan Gojak
  • 29
  • 1
  • 4
0

Here is the definition of content property as given in MDN web docs.

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/content

In your code you are trying to apply the content property directly on class selector which is present on the HTML element. Firefox tends to ignore this attribute altogether.

.brokenHeart {
    display: inline-block;
    width:   100%;
    content:  url("../images/Broken_Heart.gif");
}

To make it work in Mozilla you need to modify your CSS like this.

.brokenHeart {
    display: inline-block;
    width: 100%;
    content:  url("../images/Broken_Heart.gif");
}

.brokenHeart:after{
    content:  url("../images/Broken_Heart.gif");
}

Keep the content property on element (for Chrome) and add a pseudo-element :after (for Mozilla).

Community
  • 1
  • 1
pixlboy
  • 1,452
  • 13
  • 30
0

Reviving an old thread. I came here looking for a solution too. The answer is straightforward:

Instead of using this format, "C:\Users..." etc, use this style, "file:///C:\Users..."

The reason for this format is that Firefox blocks paths to local files that start with "C" for security reasons. The new format won't affect Chrome or Edge.

Happy coding.

ouflak
  • 2,458
  • 10
  • 44
  • 49
Inarak Dnomsed
  • 1
  • 1