Questionmark and border on Mac in ALT-text with styled img

Question

I am trying to style a box for the alternative text in pictures. If a pictures doesn't exist I want the alternative-text to appear in a box with text in it that looks like a picture. It works on PC, but it doesn't look the way I want on Mac. A thin grey border appears and a question mark is placed in the middle.

Picture: http://postimg.org/image/tte1lw8sj/

This is my HTML for the pictures

<a href='LINK.php?id=$id'><img src='$filename' class='headerimg' alt='$alttext' width='300'></a>

And this is my CSS:

.headerimg {
color: #000;
font-size: 20px;
margin-bottom: 5px;
max-height: 120px;
border: none;
}

Does any one know why it box looks different on Mac?

Answer 1

The rendering of an img element in situations where the image is not displayed is very browser-dependent, and you cannot expect to style it consistently. For example, some browsers simply render the alt text as if the element were just replaced by that text (and some people think that this is really the most appropriate way).

Unless you need to support rather old browsers, consider using an object element instead. It allows the fallback content to be normal HTML, and you can put an element there and style it as desired:

<object data='$filename' width=300><span class=alt>$alttext</span></object>