CSS Dilemma

[arnold]

If I insert a graphic in a post in Wordpress I have various alignment choices (top, right, left etc). My problem is with the left and right alignment settings.

When I set these they work as expected but I get a margin problem - there is no gap between image and text. I know this has to be changed in the CSS but I just cannot figure out what class needs to be changed.

Can someone please point me in the right direction?

Thanks.

[PaulR]

Try this,

PHP Code:

<img width="xxx" height="xxx" align="left" padding-right: 5px alt="xxxxx" src="/path/to/image/" /> 


If you are aligning the image left then make the padding to the right or vice versa.

Untested but should work.

[timarcher52]

I think you'll need to put the style="" around the padding css attribute since you did it inline in the tag.
i.e.:
style="padding-right: 5px;"

<img width="xxx" height="xxx" align="left" style="padding-right: 5px;" alt="xxxxx" src="/path/to/image/" />

[arnold]

Thanks, I tried it, WordPress just throws the code regarding the padding away. I then changed the code to <img width="xxx" height="xxx" align="left" style="padding-right: 5px;" ......

This actually works. I just wish I could find a place to do this in the stylesheet so that I do not have to change every entry manually. Thanks so much for steering me in the correct direction.

[PaulR]

Originally Posted by timarcher52

I think you'll need to put the style="" around the padding css attribute since you did it inline in the tag.
i.e.:
style="padding-right: 5px;"

<img width="xxx" height="xxx" align="left" style="padding-right: 5px;" alt="xxxxx" src="/path/to/image/" />

Yep, thanks.

[johnisfit]

Originally Posted by arnold

I just wish I could find a place to do this in the stylesheet so that I do not have to change every entry manually. Thanks so much for steering me in the correct direction.

Try this in your stylesheet:

.entry img {padding-right: 5px}

Note that will effect every image in your post. If you want to apply to different rules to different images (for example if you only want to apply this to the image you put in the upper left corner of your post) then you would do something like this in your stylesheet:

.entry img.upperleft {padding-right: 5px;float: left} // added the float for fun

Then when you insert your image you would do it like this:

<img class=”upperleft” src=”…” width=”x” height=”y” alt=”The alt text for this image” /> 

Good luck!

[arnold]

Thanks guys.