CSS Image caption works in Firefox, but not IE or RSS readers

If you go here in firefox, you can see the image with the caption directly below it. but go there in IE, and the text is to the left, and pushes everything down.

Also, in the RSS feed, how do you get the image to float, like John Chow has his ads float in his feed?

Thanks for the help!

 

Here are a few more details:

For the image and caption I have:

<p class="captionright" align="right">
<img class="right" title="A beretta pistol, gun" alt="A beretta pistol, gun" src="/wp-includes/images/Beretta.jpg"/>
(Christians would rather use this than the more effective weapons of the gospel.)
</p>

The CSS:

.captionright {float:right; font-size:0.8em; width:300px;text-align: center;padding: 10px;}

Thanks.

 

i looked at it and the only feedback i have is that i think the content of the site is very interesting... i'm messing around with your code because i'm trying to learn but don't expect anything other than "cool article!" from me

max

 

mlg5454

I'll take "cool article!" any day of the week.

Thanks.

 

I'd lose the class on the image, the inlined align="right" property - and see if that helps.

I'm fairly certain this:
#content img.right {float:right; margin:0 0 10px 10px;}

is what's messing with you. Lose the .right property on the image and you should be fine (since the image will revert to being an inline property with no margins or padding) Float inside a float with a margin making the inner one wider than the outer one can lead to strange results.

 

It got a tad closer, but not quite. The image moved back to the left, with just one word to the left of it. Everything else was pushed down.

 

alright, let's eliminate all the possible causes.

Switch from a paragraph to a div - could be you're picking up something wierd from formatting the other paragraphs in that area. AXE the align properties - they aren't needed.

<div class="captionright">
<img class="right" title="A beretta pistol, gun" alt="A beretta pistol, gun" src="/wp-includes/images/Beretta.jpg"/>
(Christians would rather use this than the more effective weapons of the gospel.)
</div>

Code (markup):

Then make sure all that's in your CSS for .captionright is:

.captionright {
float:right;
font-size:0.8em;
width:300px;
text-align:center;
padding: 10px;
}

That SHOULD be all it takes - if that doesn't do it you're probably looking at some heavy duty debugging given that the vomitous mess most turdpress templates are is going to make figuring out what's causing the issue nigh impossible, though a start would be to fix the 34 validation errors.