Unwanted space added underneath image captions?
-
Hi, not sure if this is a bug or me being dense.
I’ve added a few images with captions. Everything looks fine in the visual editor but, for some reason, when I update the page and view the image on the live site it adds an unwanted, unsightly space below the caption.
For example, see the portrait image on this page: http://aboutthemen.wordpress.com/foreword/
In the visual editor the grey border wraps tightly to the bottom of the text but for some reason when published it looks as if it adds an extra line.
The blog I need help with is: (visible only to logged in users)
-
P.s you can see in the widget image on the right the look I’m going for – it seems to work ok there..
-
Add this to your CSS
.wp-caption p.wp-caption-text { margin: 5px !important; }There was another margin property in another section of the CSS that was overriding the margin bottom that had been set for the captions.
-
Fantastic! Thanks very much!
Just out of interest, how did you find the conflict? Is it easily done? I have been using Firebug recently which is great for having a look at margins / padding etc, but it didn’t show me any conflicts (at least, not in the layout tab as far as I could make out.)?
-
You’re welcome.
It won’t call out the conflicts, but when you inspect an element (in this case the image) I saw that there was 5px of margin specified, but in another selector the bottom margin was called out as 28px. I temporarily disabled the 28px margin and it corrected, so then I just added the !important to that 5px margin declaration so that it would override the 28px in the other selector.
Generally the more experience you get with CSS the easier it is to spot things like that.
-
Ah, brilliant, very clever!
Well thanks for the help and the explanation too – saves me having to ask next time!
-
- The topic ‘Unwanted space added underneath image captions?’ is closed to new replies.
WordPress.com Forums 