Sent by Holly Bergevin on 18 January 2005 20:08
From: "saul" [EMAIL-REMOVED]>
>I'm trying to place an image and a caption within the flow of
>paragraph
>http://www.inventionshow.com/17_inv_community/200303/index01.shtml
[snip]
>I [snip] cannot get the image
>to do what I would like it to do. Any suggestions?
You've run into an IE bug, related to the peekaboo bug [1]. Alter your CSS (embedded) to the
following -
div.figure {
float: left;
border: 1px black solid;
margin: 0 0.5em 0.5em 0; /* shorthand margin property */
position: relative; /* this is what fixes IE */
width: 55px; /* set div width to image width */
}
div.figure p {
text-align: left;
font-style: bold;
font-size: 10px;
font-family: Verdana, "Tahoma", Arial, sans-serif;
margin: 3px; /*specifically set this */
}
If you'd prefer white space within the div to surround the image, add some padding {padding: 3px;)
to the div and remove the {display: block;} from the div.figure img selector.
The CSS would look like the following -
div.figure {
float: left;
border: 1px black solid;
margin: 0 0.5em 0.5em 0;
position: relative;
width: 55px;
text-align: center; /* centers the image */
padding: 3px; /* provides the space */
}
div.figure p {
text-align: left;
font-style: bold;
font-size: 10px;
font-family: Verdana, "Tahoma", Arial, sans-serif;
margin: 3px;
}
div.figure img { /* display: block; is removed */
margin: 0;
padding: 0;
>The rest of the CSS works fine, and is in a separate document,
Well, I don't know about your statement that the rest of the CSS "is in a separate document."
There's a heck of a lot of inline CSS on that page; all the inline styles for the menu for one
thing. You also have some align attributes that could probably be moved to the style sheet.
I hope these suggestions work as you want. If not, let us know what's still not working.
~holly
[1]http://www.positioniseverything.net/articles/hollyhack.html - See {position: relative;} on this
page.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
