WP Version: 2.1.2
Issue: Even though I use a 5px vertical and horizontal spacing when inserting images in my posts, they don't display in Firefox browsers. It seems to work ok with IE, but how do I get this working correctly with FF
If you view my front page on the site in both browsers you will see what I mean. Thanks in advance for any help you can offer.
c0y0te
[sig moderated]
It might be easier if you added it to your style:
style="width: 175px; height: 232px; margin-left:5px; margin-bottom:5px"
Diane - sorry to be obtuse but can you explain that a bit more for me please? I'm not particularly brilliant at CSS.
What exaclty are you recommending I change?
Sorry for the delay.
Instead of doing this:
<img src="image.jpg" width="175" height="232" vspace="5" hspace="5" />
Try this:
<img src="image.jpg" style="width:175px; height:232px; margin-left:5px; margin-bottom:5px" />
See, this just uses more modern coding than the old vspace/hspace stuff.
That said, if you view the source code of the page where you're having trouble, you could find out if the rich text editor (if you're using it) is convering spaces to ". That could also be it.
Diane - the problem is I'm using the base WordPress code for this. In other words, when I "Insert Image" it presents me with a form to fill out, two fields of which are Vspace and Hspace. I enter the "5" into each box and it generates the code in the background.
So - it's actually WordPress which is using old code then I guess. Pity that.
c0y0te
Well, you could always insert the image, then write the CSS into the code.
As well, I believe there are some default styles in style.css which deal with centering, left-aligning, etc. You could update those (or add new ones called .imgleft or something of that nature). For instance:
In style.css:
.imgleft {float:left; margin-right:5px; margin-bottom:5px}
In post:
<img src="some.jpg" height="X" width="X" class="imgleft" alt="description">
That would be the most streamlined method I can think of today. That is, you'd need to edit in the coding window in order to apply the class to the image, but that's the way it goes if you want to get a little fancy.
That's what I used to do for each post (e.g. insert class for specific CSS) but then this lovely WP2.1 version hit and I thought the new insert image thing was a dream, until I realised it wasn't working in FF.
It would be so much easier if the WP developers just updated their code. All it would take is one line.
True. But then you'd run into people who didn't want that to happen automatically.
Look in your styles.css and update that. If you want images to have a certain spacing around them automatically, add this:
img {padding:5px}
That will give you a five-pixel padding on *every* side of every image. Automatically.
If you want padding just on one side, or on the right or left side depending on whether the image is on the left or right, then you have to do more.
Really, we all want automatic. It's just that we don't all want the same things to be automatic. :)
Posted 4 years ago #
I had the same problem. Resolved by adding this code into your theme stylesheet:
#content .entry .entrybody img {
padding: 10px; /*Edit this number to suit your theme*/
}This topic has been closed to new replies.
