Image borders in Blog posts help please

Hi thescarletfire, would you be able to link your site to see this there?

Hello,

Sure if you think it would help.

I am the webmaster for this site and responsible for updating the blog contents monthly:

https://www.geniusound.com

Here is one blog post that has a lot of images for you to see the problem:

https://www.geniusound.com/gear-reviews/ddmf-iieqpro/
See how all those images in the post have no border and the caption is not centered? I had to manually italicize the caption, but it still looks nothing like it did in the actual post editor in WordPress. Why would the images have the proper WordPress border / caption formatting in the post editor, but after publishing, not have any formatting? ??

I just now took over this project.

If you could please take a moment, check out my CSS (I only have the one ‘standard’ CSS file) and tell me why the blog images don’t have the WordPress default border around them, and why my captions are not centering, I would be very happy.

You see, I’ve already checked and confirmed that in the post editor, as I create the post in WordPress, the image has a border and the caption is centered. When I go to publish, and visit the blog itself, it has no border and no formatting on the caption / image.

Why is that? Is there any other file from my theme contents that would conflict with my CSS for this image / caption, or is the problem 100% related to my CSS file only?

Thank you! You truly are saving me here.

Your images, in the blog page provided, have a border due to line 714 style.css

img.wrapped {
padding: 2px;
border: 1px solid #D9D9D9;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Is this what you mean?

why my captions are not centering

Which captions? The title like, “Tonight we’ll be hearing works…” ?
Or the title like, “EVERYTHING BUT THE KITCHEN SINK” ?

Hello,

Thank you so much for stopping by to help.

No, those are OK and part of the theme. In the actual EQ blog post itself, as you scroll down, see all those EQ snapshots (blue GUI screens), with italics under them – those images I am talking about.

https://www.geniusound.com/gear-reviews/ddmf-iieqpro/

Each post itself has a featured image, which is fine and styled OK, but once you load a blog post itself (not just looking at the blog) – you’ll notice any images within that post have no borders and their captions are not centered. I was only able to italicize them.

Don’t be confused:
https://www.geniusound.com/blog/
The blog ‘main’ page is ok – it’s the individual blog posts that I am concerned with only. Hope that helps. Thank you again!

In the actual EQ blog post itself, as you scroll down, see all those EQ snapshots (blue GUI screens), with italics under them – those images I am talking about.

That border is applying on line 835 style.css

.wp-caption {
background: white;
border: 1px solid #F0F0F0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}

Right, I added that CSS from the WordPress codex to try and get my images to have borders and proper caption formatting. But I’m not seeing it here after publishing, only during the post editing behind the scenes.

Are you saying that those EQ images all throughout that post have borders around them? Why would you be able to see them but not myself?

I’m confused, sorry. So I did put the correct CSS in to get the ‘default’ WordPress image borders?

Here is something that should help you help me ??

Here are two screenshots I’ve just taken. Please take a look and see what I mean. I would like my individual blog posts to have images with borders, and any captions centered.

Here is what I would like it to look like (and how it look as I’m editing the post):

Before Publishing
https://i.minus.com/if6V0fHweI5xR.JPG
Notice the border and caption formatting.

After Publishing (what it looks like actually online)
https://i.minus.com/i4T3IMWvYVnw9.JPG
See how it looks nothing like it did? ??

Please tell me what I need to put in my CSS file to get my blog posts to actually look the way they do in the WordPress editor. Thank you so much!

Are you saying that those EQ images all throughout that post have borders around them? Why would you be able to see them but not myself?

Try clearing your browser cache, or use a different browser.

I have cleared all caches, flushed my DNS, restarted my router, used Ccleaner, etc – everything.

Did you see those two pictures I uploaded just now? (See above post)
See how they are completely different? I want my blog to look as it does in the WordPress editor. Hmm….

Are you confirming that the blog itself looks identical to the editor “Before Publishing” image I uploaded to show you?

Can you take a screenshot of what you see maybe?

I can’t seem to wrap my head around this.

On page
https://www.geniusound.com/gear-reviews/ddmf-iieqpro/
https://awesomescreenshot.com/0d2ciywd3

No way! How is that possible? lol

I don’t understand why it doesn’t look like that here. Other CSS changes I’ve made reflect after a cache clearing, but not this for some reason.

Um…how do I force a full cache clear for myself and get it to look like it does for you? ?? I’ve seriously tried everything I could think of as I mentioned earlier. Crazy!

Thank you SO MUCH for helping me – I guess I added the CSS correctly but never could “see” it here. Doh!

Any tips on how I can force clear everything on my end?

Which browser are you using?
I’m using Chrome 14.0, perhaps it’s a browser compatibility issue?

Chrome 21 here.

Hmm…maybe, but I’ve tried IE and Firefox as well.

One other question, about the screenshot you sent me.
https://awesomescreenshot.com/0d2ciywd3

If you look at it, see how there is extra “blank” space under the caption (on the upper blog picture in your screenshot) – is there a way to trim that so the border is closer to the caption itself? See what I mean? Just make it tighter under the caption.

Thank you again! I owe you one ??

Sorry I meant 21.0 (was getting confused with firefox 14.0).

The blank space is coming from line 864 style.css, padding bottom of 5px;

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
margin: 0;
padding: 0 4px 5px;
}

and
line 835 padding bottom of 10px

.wp-caption {
background: white;
border: 1px solid #F0F0F0;
max-width: 96%;
padding: 5px 3px 10px;
text-align: center;
}

?? It’s OK. I assumed you were thinking about FF14 while posting.

Thank you for the code hints! That’s exactly what I needed.

Finally, would you recommend a certain approach to this? Do I need to edit both lines?

What’s the best way to change the overall padding so that the border of the entire image itself is just a little bit closer “up” to the bottom of the caption text?

Thanks again Andrew, great help!