Question

My CSS file is:

        #name_wrong_img
        {
           width:43px;
           height:29px;
        } 

This is my HTML code:

         <img id="name_wrong_img" src="wrong.jpg" />

The above code is working well in both Firefox and Chrome.

        #name_wrong_img
        {
           content:url(wrong.jpg);
           width:43px;
           height:29px;
        } 

         <img id="name_wrong_img"  />

This is working well in Chrome. But not in Firefox. What is the problem in this?

Answer 1

Firefox doesn’t support the content property in the same way as Chrome — on img elements and/or when the source is an image.

<img> represents a content image. If you use it, it should have a src and an alt.

From the specification:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.