WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] images w/ class="aligncenter" don't center in webkit browsers (safari / chrome) (10 posts)

  1. boilr
    Member
    Posted 5 years 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 - http://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) - http://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.

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    Try adding:

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

    to your theme's stylesheet.

  3. boilr
    Member
    Posted 5 years ago #

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

    http://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.

  4. esmi
    Forum Moderator
    Posted 5 years ago #

  5. boilr
    Member
    Posted 5 years ago #

    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.

  6. esmi
    Forum Moderator
    Posted 5 years ago #

    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.

  7. boilr
    Member
    Posted 5 years ago #

    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.

  8. boilr
    Member
    Posted 5 years ago #

    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.

  9. andmej
    Member
    Posted 4 years ago #

    Well, can you tell what the problem was?

  10. Mark / t31os
    Moderator
    Posted 4 years ago #

    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).

    http://validator.w3.org/

Topic Closed

This topic has been closed to new replies.

About this Topic