CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxweb
Sid
Sid

Reputation: 4997

Why does this element not render in Firefox?

The following HTML/CSS code is rendering in IE (Version 8) but not in Firefox (Version 25)

Any reason why?

HTML:

<img class="buttonmini" id="btn_Actual_Effort" onclick="showEffortDetail()"    disabled="disabled">

CSS:

.buttonmini
{
    background: url(../newimages/effort_calendar.gif) no-repeat;
    height: 16px;
    width: 16px;
    font-family: Verdana; /*font-size: 8pt;*/
    cursor: pointer;
}

Upvotes: 0

Views: 591

Answers (2)

Enigmadan
Enigmadan

Reputation: 3408

Short answer:

It can be fixed if you add a display: inline-block in your css.

Longer answer:

It also renders in Webkit based browsers (Chrome and Safari at least).

This seems to occur because Firefox does not interpret image tags the same way as other browsers.

The <img> tag is defined by w3 as an inline-block element.

When the image's source is included in the tag (e.g. <img src="thisIsMyImage.jpg">), Firefox interprets it correctly (as an inline-block element).
However, when there is no src available immediately in the tag, Firefox appears to interpret it solely as an inline element. This means you cannot define it's width or height.

Check out this jsfiddle for some experimentation with different ways of getting the background of an <img> tag to display.

Upvotes: 1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201678

In an img element, the src attribute is required by HTML specifications. If you omit it, the rendering and behavior of the element is undefined. (It may work with some browsers the way you want, and you might trick some other browsers to do the same, but any new version of a browser could break things down.)

Thus, use a content image (an img element with src attribute and adequate alt attribute), instead of a background image on an img element.

Upvotes: 1

Related Questions