making text wrap around images

Followup: I should add that the wrap looks fine in the dashboard; it just doesn’t appear to be wrapping when I preview the page.

can anyone help with this?

So, I’m gathering that the ability to wrap text around images using the dashboard settings is borked… I’ve searched the codex, sniffed around some blogs about wordpress, but I don’t find anything to help me make the tool to flow text around an image work. this worked fine in 2.5, but now that I’ve upgraded to 2.6.1, it’s broken. Is there anybody here who can help with this?

blog is: https://www.thespacewriter.com/wp — the entry about mirrors and ovens has text that wont’ flow; previous entries were created in 2.5, and they flowed… so what is the deal?

Okay, for those of you not paying attention to this, move on to the next message. For those of you who use the tool to align images, I figured out that if you put in a caption, it borks the alignment and will NOT allow the text to flow around the image. If you go to my page now, you will see it aligned properly around the image. However, if I put the caption in, using the dashboard tool, the text will NOT align.

Someone from wordpress development should take note of this and test it to see if it can be fixed.

Do you have “alignright” in your stylesheet, setting it to float right? Ahh – yes, you do – but your class is in the wrong thing.

Your code is like so:

<div class="wp-caption alignright" style="width: 375px"><img style="border: 1px solid black; margin: 3px 6px;" src="https://www.lsst.org/Gallery/photos/LSST08-image-thumb.jpg" alt="Fresh from the oven!" width="365" height="292" />

You need to understand a little about CSS to see what’s going wrong here. DIV’s, by default,are block-level elements. Which means that when you have a div on a screen, there will be nothing else on that line unless you tell it to display:inline or float. You’ve placed the image within a div, which is a block-level element. The DIV has the “alignright” attribute – but your alignright” is specified for *images* only (img.alignright) – so it ignores the specifics for that and takes up the whole line.

Take it out of the div. Apply “alignright” to the image only.

Oh, and you have 143 validation errors. That might be contributing to your issues as well.

Ah, okay, this makes sense. DO I change it in the CSS stylesheet? Here is my stylesheet; where do I make tht change? I didn’t write my own stylesheet; it came with the theme I use, but I did modify some if it (although not the image alignment calls).

Would the validation errors be stemming from the CSS sheet?

I know how to fix those in html, but not so much with this programmming.

thx.

Edit by mod: Removed long bit of CSS, we can see your CSS just fine on your site itself.

Posted last night… Doodlebee… you raised interesting questions; can you help further?

The captions thing works for me just fine. I use code similar to that in the default theme:

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}

Also, doodlebee, the alignright is indeed supposed to be on the caption div, not on the image. That was a change introduced in the captioning. The idea is that you want the div to float. If you don’t have a caption, then the div isn’t there and the image gets the class instead. Clever, eh? Given the above CSS code, that is. ??

ccpetersen: Change your .alignright and .alignleft classes to float instead of using text-align. Basically, change that bit in your CSS to look more like the above.

Okay, I made those changes to my css and just now wrote a post with a pic embedded. Same problem is happening; if I have a caption, the text won’t wrap around the image. If I take out the caption using the image edit tool in the dashboard, the text will wrap…

When I write a caption, it now puts it below the last paragraph, and in addition, no matter where I tell the tool to put the image, it puts it on the left and won’t resize the image. It looks fine in the editor, but when I test the page in preview, it’s all bunged up.

Okay… I posted the current one (data in a cube), and neither picture has a caption. The text alignment is fine. If I put in captions, I get what I described above.

cc

ccpetersen: I’m looking at your page now and not seeing anything with any captions.

We can’t fix your problem if you don’t leave it up there long enough for us to actually SEE it.

I never put them in — it screwed up the page so badly… but, here you go… I’ve put them back in… one with captions, one without…

https://thespacewriter.com/wp/

without the caption, the text wrapped fine… with it, the text gets shoved around… and won’t wrap.

… I’m not seeing the problem here, other than your captioned image doesn’t have the pretty wrap around polaroid like stuff on it.

Here’s what I see on your page right now:
https://img98.imageshack.us/img98/2643/nocaptionszg0.png

You can add that pretty stuff by adding this code:

/* Captions */
.aligncenter,
div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	border: 1px solid #ddd;
	text-align: center;
	background-color: #f3f3f3;
	padding-top: 4px;
	margin: 10px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption p.wp-caption-text {
	color:black;
	text-align:center !important;
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
/* End captions */

This is what I see after adding that code to the CSS:
https://img329.imageshack.us/img329/7554/captionsvv9.png

Well, crap. when I posted it, the page did NOT show the wrap around. Now it does…

Stumped cat is stumped.

:0

Okay, I can see how that would tweak the look of it… I’d need to mess with the colors a bit since I think the white border is ugly… but I get your point.

thanks. I guess this solves the issue more or less. I’ll keep playing with it…

okay… so what do I change to change the color of the “polaroid” border and the text color in the border to match my other colors?