On May 01, 2007, Skip wrote:
> I have constructed a caption div for images that seems to work well for
> me. You can see it here:
> http://www.boisestate.edu/webcenter/workshops/02/file09.html
>
> I wanted to add some padding inside p.imgcaption. This worked, but it
> also produced an unexpected effect, which you can see here:
> http://www.boisestate.edu/webcenter/workshops/02/file10.html
>
> It appears that the padding actually expanded the size of the div
> which, since I set it inline at a specific width, I certainly did not
> expect and don't know how to explain. And since I'm teaching a workshop
> on this, I figure I ought to be able to explain it!
>
> My students are going to ask the obvious follow-up, too; namely, since
> this doesn't seem to work, if I *did* want to add some left-right space,
> without expanding the box beyond the picture, how would I go about it?
Hi Skip
You have given no padding for the image div. There are these issues in both the
html and CSS.
1) You have no width in the html for the image (and no title is needed). The
code should be.
<img src="innocents.jpg" alt="Innocents Abroad book cover" width="200px"
height="295px" />
2) You have set the width for the paragraph in the html. This is presentational.
3) The div.image img has a margin-left: 1em.
4) You have the image and paragraph caption floated instead of the div.
A width for an image must be stated in the html so the browser knows how much
space to allocate for the image before it load (CSS alone doesn't work for IE).
The margin-left for the image is creating the space between the left of the
image and the div. The paragraph for the caption has no margin and the div has
no padding so the paragraph sides are resting on the sides of the div. You need
to remove the margin-left for the image a have padding for the div. This will
make the image and the paragraph the same width. The CSS should be. Floating
the image and paragraph caption instead of div is the reason that there is a
break in the content text in IE7.
div.image {
height: auto;
width: auto;
padding: 20px;
margin: 0 0 20px 20px;
float: right;
}
div.image img {
border: 1px solid #000;
width: 200px;
width: 295px;
}
p.imgcaption {
border: 1px solid #000;
font-family: verdana, sans-serif;
font-size: .7em;
text-align: center;
margin: 0;
padding-left: 10px;
padding-right: 10px;
}
Kind Regards, Alan
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
