Image spacing in Firefox

Mar 30th, 2008 | By webmaster | Category: Design secrets

In Firefox, there’s been a problem with horizontal and vertical spacing around post images. In IE, illustrations in posts generally look okay. In Firefox, the text appears to butt up against the image.

Here’s the solution that I’m using with WordPress 2.3, thanks to the WordPress Support forum:

I’ve added something like this to my style.css in my theme folder:

img {padding:5px;}

That puts five pixels of space around all four sides of the image. You can increase or decrease that, according to your tastes.

If you want to specify different padding on different sides, you’ll need to do something more like this:

img {padding:5px 10px 5px 10 px;}

(Tip:  I’m pretty sure that the border code goes clockwise around the image, starting at the top of the clock.  My CSS expertise isn’t red-hot, so I may be wrong about that, but… well, it’s worth a try, right?)

Also, if you’re seeing a border around your post illustrations in Firefox, edit the image in the post.  Be sure that WordPress didn’t add a border.  I’m not sure if it was my own typo or a WordPress auto-fix, but changing the image details (in the popup window at the Write Post panel), to border=0 , solved it.

2 comments
Leave a comment »

  1. Hi Eibhlin,

    I have been struggling with that problem for a day and a half and could not get your solution to work, so I finally had the good sense to go to a comparable page on the Branford Magazine site and “view source.” Duh!

    I found and copied this line of code, with adaptations to my site.

    Seems all I needed was to add the class=”left” src= and my fully qualified URL.

    It works easily and beautifully, anywhere in the post.

    Hope this helps.

    Kirk

  2. P.S - GREAT book!

Leave Comment