Can css tell if an image "has layout"?

HTML & CSS
1

I’ve got a pre-made block of xhtml that holds a set of definition list items.

<div id="accordion-1"> 
	<dl> 
		<dt>First slide title</dt> 
		<dd><img src="wp-content/uploads/slide1.png" /><h2>This is the first slide</h2><p>Slide 1 content goes here.<br /><a href="#" class="more">Read more</a></p></dd> 
		<dt>Second slide title</dt> 
		<dd><img src="wp-content/uploads/slide2.png" /><h2>This is the second slide header title</h2><p>Slide 2 content goes here.<br /><a href="#" class="more">Read more</a></p></dd> 
		<dt>Third slide title</dt> 
		<dd><img src="wp-content/uploads/slide3.png" /><h2>A few more slides to go here</h2><p>Slide 3 content goes here.<br /><a href="#" class="more">Read more</a></p></dd> 
	</dl> 
</div>

Each of the dd elements contains a paragraph of dummy text along with an image that points to a predefined file from the uploads directory and there’s an external js that makes a slider widget out of this markup.

So, the first slider uses slide1.png, the second uses slide2.png, etc.

However, the end user has to load those images themselves. Otherwise the slider just presents a broken image icon.

So my question is if its possible to determine with css whether an img element’s src attribute actually is present and has intrinsic physical layout properties?

If so, I can use that to conditionally hide the image so that a broken image icon does not appear (or preferably a stub icon that helps the end user understand they need to upload the missing image or remove it from the markup).

2

Can css tell if an image “has layout”?
Hi Scott,

You do realize that “haslayout” is an IE specific property don’t you. When using that term we are only talking about IE, specifically IE7 and under.

However, the end user has to load those images themselves. Otherwise the slider just presents a broken image icon.
That’s going to be the case with any image in the html. The only time they are going to get a missing image is if you have a wrong file path, the image is not on your server, or they have images turned off. If it is the later then the missing image icon is normal for them.

So my question is if its possible to determine with css whether an img element’s src attribute actually is present and has intrinsic physical layout properties?
As long as you have defined your width/height attributes then the space will be preserved (in all but FF) even if the image does not load. To make FF honor the missing image dimensions you would need to change the img display to either block or inline-block in the css.

If so, I can use that to conditionally hide the image so that a broken image icon does not appear (or preferably a stub icon that helps the end user understand they need to upload the missing image or remove it from the markup
Your stylesheet (css) is not going to know if the image did not get loaded, it has no way of knowing that.

If you were to try and hide the image with css you would be hiding it in all scenarios, whether it loaded or it didn’t load.

The users can’t remove a missing image from your markup. That is, if your talking about the user being a visitor to your site. If your talking about the user being someone that has access to edit your html then that’s different. I may be misunderstanding you there.

I see no way of removing the missing image icon from chrome and IE.
Here is how you would maintain the dimensions when the image is missing though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">

div {
    width:400px;
    margin:0 auto;
    text-align:center;
    background:#EEF;
}
img {
    display:inline-block;
    margin:20px auto;
    background:lime;
}
</style>

</head>
<body>

<div>
    <img src="imgs/foo.jpg" alt="missing image" width="200" height="100">
</div>

</body>
</html>
3

Thanks Rayzur. Bad choice of terms I suppose. By “has layout” I was not inferring “hasLayout” but I can see the confusion.

The end users who control the site are my target for this question, not site viewers per say. So I’m fine with the missing image since it will alert them that they need to delete the image reference or upload one to fill it.

Thanks for the thoughtful response.

4

The end users who control the site are my target for this question, not site viewers per say.
Okay, I see your point now :slight_smile:

In that case I would just use the alt attribute with “missing image” like I did in the code above. Actually the alt attribute is required with strict dtd anyways, that would be the best way to alert them without making them fix any image hiding tricks in the css.