What's the best way to handle images with notes?

**cydewaze** · Oct 3, 2012 07:01

My job involves HTML-izing a lot of reports. Most of these start off as Word docs, and many contain images.

The images usually have a note below, like this:

[image here]
Figure 1: picture of a mouse

I want the page to look tidy, so I try to nest smaller images within the document and let the body text wrap around them. This is easy to do with a div, and I'm using this CSS:

Code:

.imgleft { float:left; padding:0px 10px 5px 0px }

(there's also one to float the image right).

This works just fine, until I have a note for the image. Since the note text has no way of knowing how wide the image is, I have to use <br> tags to keep the text from pushing the div to the right and creating blank space. The only word-around is to assign a width to the div, but since all the images are a different width, that gets clunky.

I don't know of any way to put a div around the image and not let the text push it wider. Does anyone else?

**ralph.m** · Oct 3, 2012 08:09

I can't think of a way to do that with CSS, but you could do it with JS.

A CSS alternative might be to work out the likely minimum width of potential images, and then set that as a width or max-width for the caption. That will mean it won't be as wide as some images, but does that matter?

**cydewaze** · Oct 3, 2012 09:35

Having the image wider than the text is fine. The only thing is that if we have a wider image, and a long string of text, it'll grow vertically, and make whitespace that way.

[ s u p e r d u p e r w i d e i m a g e ]
figure 1:
this is a
super
wide
image.

I should just mandate an image width of like 40% of the content area width, then make everyone re-size their images

**ronpat** · Oct 3, 2012 13:05

Is this what you have in mind?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
Widths in a table-cell are only a "suggestion".
-->
<head>
    <title>template</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <meta http-equiv="content-style-type" content="text/css">
    <style type="text/css">
body {
    background-color:#bdf;
    padding:0;
    margin:0;
}
.canvas {
    background-color:#fff;
    width:740px;
    overflow:hidden;
    padding:10px;
    margin:0 auto;
}
.edgeleft,
.edgeright {
    display:table;
    border:1px solid #888;
    overflow:hidden;
}
.edgeleft {
    clear:left;
    float:left;
}
.edgeright {
    clear:right;
    float:right;
}
.tablecell {
    display:table-cell;
    width:1px;
}
img {
    display:block;
    background-color:#ccc;
}
    </style>
</head>
<body>

<div class="canvas">
    <div class="edgeleft">
        <div class="tablecell">
            <img src="img.jpg" alt="" width="300" height="200">
            <p>This is the caption for this image.  This is the caption for this image.</p>
        </div>
    </div>
    <div class="edgeright">
        <div class="tablecell">
            <img src="img.jpg" alt="" width="400" height="200">
            <p>This is the caption for this image.  This is the caption for this image.</p>
        </div>
    </div>
    <div class="edgeleft">
        <div class="tablecell">
            <img src="img.jpg" alt="" width="500" height="200">
            <p>This is the caption for this image.  This is the caption for this image.</p>
        </div>
    </div>
</div>

</body>
</html>

**cydewaze** · Oct 3, 2012 14:50

Yeah, hmmmm. Sure is a lot of divs though.

**ronpat** · Oct 3, 2012 15:07

Thanks for the feedback.

PS: You call it a table, I call it div behavior. Think about it.

**ralph.m** · Oct 3, 2012 16:40

Nice example, ronpat. Gah, I must learn more about display: table. I keep forgetting about it. (It wasn't really usable when I started out, so never crept into my field of view.)

**cydewaze** · Oct 4, 2012 06:01

I knew about display: table, but I think we had problems with IE7 support, which is still a huge chunk of our user base.

**ralph.m** · Oct 4, 2012 06:47

Originally Posted by cydewaze

IE7 support, which is still a huge chunk of our user base.

IE7 has around 1% market share. Encourage them to upgrade by giving them a crappy layout.

**cydewaze** · Oct 4, 2012 08:22

Originally Posted by ralph.m

IE7 has around 1% market share. Encourage them to upgrade by giving them a crappy layout.

They don't have a choice. A lot of state and federal gov't agencies (which are the majority of our audience) are strapped to IE7 (and in some cases IE6) for various reasons, including in-house apps that were designed to run on a specific browser. They won't upgrade until they test every facet of operation, and when there's a new version right around the corner, they often wait.

As such, our IE7 share is still around 20%. Heck, we just got upgraded from 6 just over a year ago.

**ronpat** · Oct 4, 2012 08:37

It sounds like the desired effect can be achieved with html and css but "company rules" and technical restrictions prevent you from achieving it. Makes more sense than "lot of divs".

**ralph.m** · Oct 4, 2012 09:05

You can always resort to JS if needed.

**cydewaze** · Oct 4, 2012 09:18

Originally Posted by ronpat

It sounds like the desired effect can be achieved with html and css but "company rules" and technical restrictions prevent you from achieving it. Makes more sense than "lot of divs".

Oh don't get me wrong. Your solution works really well; I'm just trying to figure out how to make it work within our existing template (that already has a few too many nested divs) without having unexpected behavior inherited from what's already there.

But the IE7 thing is a real pain. At least we don't have to code for IE6 anymore.

**ronpat** · Oct 4, 2012 19:56

Oh don't get me wrong.

Although I initially thought your reply, "a lot of divs", was somewhat disingenuous, it also gave me good chuckle.

From the movie, "Amadeus", came the line where Emperor Joseph II told Mozart that his composition of "The Marriage of Figaro" had "too many notes". Your comment struck a funny chord, so to speak <still laughing>.

I understand the problem with nested tags and inheritance. It gnaws my ankle every now and then. <smile>

Don't envy you having to support IE7. May I ask what level of government you support?

**cydewaze** · Oct 5, 2012 05:35

Originally Posted by ronpat

Don't envy you having to support IE7. May I ask what level of government you support?

I'm Federal, but a lot of state and local (as well as other Federal) agencies view our site.

We're using a template that a bunch of us created over the course of many months, and as time has worn on and we've gotten better with CSS, it's clear that we did a lot of things with divs that we didn't need to. Example:

Code:

<div id="subnaviation">
   <div id="localnav">
      <ul>
         <li>...

Which probably could have been handled with:

Code:

<ul id="localnav">
   <li>...

But with around 50,000 pages using the new template, and a few thousand left to convert, fiddling with is is not a high priority, especially since any changes to the template would require changes to our CMS (because the CMS can create new pages with a click). Maybe once we get all the pages converted, I'll look into cleaning up the CSS and "de-div'ing".

Your solution was impressive though, and I've filed it away for the second I get the go-ahead to ditch IE7 support. But at the rate of gov't, I might be retired first!

User Tag List

Thread: What's the best way to handle images with notes?

Thread Tools

Display

What's the best way to handle images with notes?

Bookmarks

Bookmarks

Posting Permissions