Image centering problems


Author Message
April

Posted: 3/12/2009
Quote message 

Hey everyone, I could use a little help...

When I include centered images in my posts, they show up left aligned, with a slight indent. This has only been happening since I switched to a 2.0 created theme, and never happened when using 1.0 and even beta themes. Any thoughts?

Here's my site: http://www.graciousrain.com

Any image showing Left alignment is actually Center, it's just not showing that way.

Thanks for your help!

April

 
Marc Smith

Posted: 3/12/2009
Quote message 

For some reason, the images that are not aligning center are contained in an H3 tag which is aligned left.

I used FF and the Firebug plug in to inspect the CSS that is related to the images.

The first image has this CSS code:


<h6 style="text-align: center;">
<a href="http://www.graciousrain.com/wp-content/uploads/2009/03/268182855_1e23f49a44.jpg">
<img class="aligncenter size-full wp-image-4630" height="220" width="331" alt="268182855_1e23f49a44" src="http://www.graciousrain.com/wp-content/uploads/2009/03/268182855_1e23f49a44.jpg" title="268182855_1e23f49a44"/>
</a>


as well as this code:

 

h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {style.css (line 1571)
color:#4A4A4A;
font-family:Arial,Helvetica,Sans-Serif;
font-size:14px;
font-style:normal;
font-weight:bold;
text-align:left;


And, if I use Firebug, it seems to find a hidden space next to the picture(s) in question, which could explain what the image is pushed left as it might be trying to center two things (one that is seen and one that isn't)

Are you using the Visual editor in Wordpress? Keep in mind that any edits you make in Wordpress' visual editor for a post or page overrides whatever the CSS is set to.

Try deleting the pictures and putting them back in, there is definitely something funny with how those images were placed.
 
April

Posted: 3/12/2009
Quote message 

Alright, I removed the H6 tags, and still, same problem. What am I not seeing?
 
April

Posted: 3/12/2009
Quote message 

Also, I did delete the picture and put it back. I put it back using the html editor, rather than the visual, which is how I originally inserted the picture.
 
Marc Smith

Posted: 3/12/2009
Quote message 

I am not sure why it is doing what it is.

Can you load the default template and see if happens with that template?

You can also try adding a 'center' tag on the images themselves... although you shouldn't have to. I must be missing something here.
 
April

Posted: 3/12/2009
Quote message 

I activated the default theme, it doesn't happen. The images are just as centered as can be...but putting it back to my Artisteer 2.0 theme, and there they are, left (sortof) aligned.

:S
 
April

Posted: 3/17/2009
Quote message 

I sent it all in to Artisteer, and it's a legit bug. They'll patch it, I'm sure, but in the meantime, gave me a temp fix.
"Please edit the file style.css file and around the line 985 change
margin: 1 em;
to
margin: auto;

Example:
.article img, img.article {
border:1px solid #B7A971;
margin:1em; <--- margin: auto;
}"

In case anyone else has the same problem.
Thanks for the help!
April
 
Marc Smith

Posted: 3/18/2009
Quote message 

April,

Thanks for the update.
 
Frank

Posted: 8/24/2009
Quote message 

In the style sheet find this


.article img, img.article
{
border-style: solid;
border-width: 1px;
border-color: #BBCBD3;
margin: 1em; <-------- change to a value of 0
}