images w/ class=”aligncenter” don’t center in webkit browsers (safari / chrome)

  • Resolved Jeremy

    (@boilr)


    15 years, 9 months ago

    i’m using a rather old theme that i’ve continuously hacked with each major wordpress update. generally it displays fine in all browsers with the exception of my images not being centered (and an unrelated problem with my comments css)

    as such, i can’t get images that i upload through the WP image uploader with the option “center” selected (i.e. with the class=”aligncenter”) to show up centered in either safari or chrome (i.e. webkit browsers).

    this is my site – https://www.boilr.net/

    and here is a post that shows up “correctly” (i.e. the image is centered in the post in FF and IE, but NOT in safari or chrome) – https://www.boilr.net/2009/06/09/back-to-the-futurama-bender-co-returning-in-2010/

    i’ve tried numerous CSS hacks, looking at firebug, and scouring the ‘net to find a solution with no luck. i’m guessing some of my other CSS or code is getting in the way, but I don’t have enough experience to figure out what is happening.

    any and all help would be greatly appreciated. please let me know if i need to post any other code/css for better assistance.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Try adding:

    .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

    to your theme’s stylesheet.

    Thread Starter Jeremy

    (@boilr)

    @esmi: thanks for trying to help, but it doesn’t seem to center anything in Safari/Chrome still…

    https://www.boilr.net/2009/06/09/back-to-the-futurama-bender-co-returning-in-2010/

    the main image is still aligned to the left even with that CSS added. not sure what the deal is.

    Was Chrome recently updated?

    https://www.ads-software.com/support/topic/278254?replies=3

    Thread Starter Jeremy

    (@boilr)

    i’m not sure, i know its been updated fairly recently, as has Safari, but the fact that the images are not centered in either leads me to believe it is my code/CSS.

    what else can i do to troubleshoot this matter? do you need to see my stylesheet or can you use firebug or something to look at my code?

    thanks again for trying to help.

    You’ve got some markup validation errors that could be causing a problem. There’s also a couple of complaints from the CSS validator about style within that post.

    Thread Starter Jeremy

    (@boilr)

    thanks again for trying to help. the great majority of markup validation errors are a result of the various plugins im running which apparently produce invalid code, not much i can do about that as i don’t have the coding skills to fix the plugin backends.

    as for the css errors, i can’t seem to figure out what, if any, of those issues could be interfering with the aligncenter css.

    would it help you at all if i posted some or most of my css here for you to take a look? i simply don’t have the know-how to understand which classes and ids might be in conflict.

    thanks.

    Thread Starter Jeremy

    (@boilr)

    figure it out! there was some weird CSS.

    i actually was able to diagnose the issue thru chrome’s built-in “inspect element” tool which shows all the CSS and lets you effectively turn elements on and off to see what is causing the problems.

    Well, can you tell what the problem was?

    there was some weird CSS.

    I’d imagine that means invalid code..

    If you’re having similar issues, then run your website through the validator and correct the errors shown (as boilr was instructed to do also).

    https://validator.w3.org/

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘images w/ class=”aligncenter” don’t center in webkit browsers (safari / chrome)’ is closed to new replies.