CODEWITHSUNDEEP
htmlcssimagefirefox
user420479
user420479

Reputation:

Images do not show in Firefox

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.

Upvotes: 1

Views: 2402

Answers (3)

Inarak Dnomsed
Inarak Dnomsed

Reputation: 1

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.

Upvotes: 0

pixlboy
pixlboy

Reputation: 1502

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

Upvotes: 0

Ivan Gojak
Ivan Gojak

Reputation: 29

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");
 }

Upvotes: 2

Related Questions